Academia do Vue.js 2: aprenda o Vue passo a passo

1. Olá!: Bem-vindo ao curso Vue.js Academy. Estou animada por ter você comigo. Meu nome é Chris, e eu sou um desenvolvedor web e também um experiente criador de cursos on-line, ensinando milhares de alunos satisfeitos. Vue.js é um dos frameworks JavaScript mais ativos e próximos disponíveis hoje. Ele também é um dos mais divertidos de aprender e está repleto de recursos incríveis que permitem que você crie ambos os pequenos sites até aplicativos complexos de uma única página. Então, por que escolher este curso em vez de outros cursos Vue.js disponíveis? Bem, este curso tem uma abordagem baseada em projetos. Veremos exatamente como cada conceito que você aprenderá se encaixa imediatamente em projetos reais. O curso é amigável para iniciantes também. Começamos construindo um aplicativo de lista de convidados onde começaremos com o básico. Eu forneci um modelo inicial [inaudível] para o primeiro projeto para que possamos mergulhar diretamente em aprender o que Vue.js tem para oferecer. Durante este projeto, você se torna confiante com o funcionamento do Vue, e também com os conceitos centrais, como dados de vinculação, métodos, propriedades do computador e muito mais. Você também aprenderá sobre os estágios do ciclo de vida do Vue que podemos explorar. O Projeto 2 baseia-se no que já aprendemos até agora. Apresentamos a você para criar ferramentas e também melhorar nosso fluxo de trabalho usando as tecnologias mais recentes, como o Vue CLI, Webpack e Bubble também. Este projeto será um aplicativo de cartão onde o usuário pode editar e criar seu próprio cartão personalizado. Além de ser um projeto divertido para construir, você vai aprender tantas técnicas, como usar componentes e como passar dados entre eles, juntamente com a integração de seu aplicativo com Firebase para armazenamento de imagens. Além disso, abordaremos a adição de animações e transições aos seus aplicativos para garantir que eles realmente se destacam. Tudo o que você aprender será imediatamente colocado em prática nos projetos para realmente dar-lhe uma melhor compreensão de como todos eles se encaixam em aplicações reais. O que você está esperando? Pressione o botão Cadastre-se agora e aprenda uma das estruturas JavaScript mais quentes disponíveis hoje. 2. O que é o Vue.js e por que devo usá-lo?: Se você não está familiarizado com vue.js ou JavaScript bibliotecas e frameworks em geral, algumas das perguntas que você pode estar fazendo é, o que é vue.js e por que eu deveria aprender em primeiro lugar? Bem, vue.js é um framework JavaScript muito divertido e fácil de usar para construir interfaces de usuário. O núcleo do framework é muito leve e rápido, e ele pode ser usado em projetos de qualquer ciência, desde facilmente soltá-lo em um site ou aplicativo existente até apenas usá-lo para controlar uma pequena parte, como adicionar um novo componente, diretamente para aplicativos de página única de média ou grande. Considerando o tamanho leve do núcleo vue.js, ele ainda está embalado com muitos recursos que você aprenderá durante este curso. O núcleo também pode ser estendido para adicionar mais recursos, como roteamento de frontend e gerenciamento de estado. Se você já criou sites antes, você já deve estar familiarizado com HTML, CSS e JavaScript, que são os blocos de construção dos aplicativos vue.js. Isso significa que você pode fazer uso de suas habilidades existentes para [inaudível] crescer e aprender ainda mais rápido. O Vue.js lida apenas com a camada de visualização, que significa que você está livre para integrá-la com qualquer um dos back-ends das bibliotecas, tornando-o realmente fácil e flexível de adotar. Se você usou outros frameworks ou bibliotecas, como React, muitos dos conceitos centrais serão familiares, como usar um DOM virtual e criar componentes reutilizáveis. Reagir também é ótimo para usar também, mas, na minha opinião, vue.js é muito mais fácil de começar, e também está sendo visto superando Reagir em determinados testes de desempenho. Estas são apenas algumas das razões pelas quais vue.js viu um enorme aumento na popularidade e também olha para se tornar um jogador ainda maior no futuro. Agora, sabemos alguns dos benefícios de usar vue.js, agora vamos obter a configuração de código do Visual Studio, para que possamos saltar diretamente para a construção do nosso primeiro projeto. 3. Instalação do Visual Studio: Para este curso, precisaremos de algumas coisas para começar a funcionar. Primeiro, precisamos de um editor de texto. Você pode já ter uma preferência ou uma que você já usa. Para este curso, usarei o Visual Studio Code, que é ideal para codificação JavaScript, e também possui um terminal interno que precisaremos mais tarde no curso. Você pode usar qualquer editor de texto que você gosta, mas aqui estão algumas opções populares do editor de textos, como Atom, Brackets, WebStorm e, claro, Visual Studio Code. Se você já tem um desses e tem um navegador da web, sinta-se à vontade para passar para o próximo vídeo. Caso contrário, eu recomendaria que você vá para code.visualstudio.com e siga as instruções de download para sua plataforma. Depois de fazer isso, volte e adicionaremos alguns plug-ins para ajudá-los a trabalhar com Vue.js. Uma vez concluída a instalação, vou adicionar um plug-in para adicionar Vue.js a trechos de código e também algum realce de sintaxe. Se você abrir seu editor de texto e clicar no ícone de extensões na parte inferior das opções, verá que já tenho o Vue 2 Snippets instalado. Para instalar isso, você pode clicar na barra de pesquisa e procurar o Vue 2. O que eu vou usar é Vue 2 Snippets, que é por [inaudível], em seguida, clique no botão de instalação e você está pronto para ir. Finalmente, você também precisará de um navegador da web. Eu recomendaria o Chrome do Google, mas você pode usar qualquer navegador da web que você gosta. Isto é para a configuração inicial. Agora vamos saltar para a construção do nosso primeiro aplicativo Vue.js. 4. Introdução da seção: noções básicas de Vue: Como em todos os meus cursos, eu gosto de não perder tempo em sujar nossas mãos e realmente construir projetos reais. Este curso não é diferente e vamos começar construindo um aplicativo de lista de convidados, onde o usuário pode registrar seus interesses em um evento e ter o nome adicionado à lista de convidados. O projeto será relativamente simples, mas cobriremos todos os conceitos básicos. Você precisará começar a construir vue.js-ups. Vamos em frente e começar. 5. Baixe o inicializador de projetos: Anexado este vídeo está um projeto inicial que vamos usar para saltar direto para o vue js. Eu quero baixar o meu e colocá-lo na área de trabalho para fácil acesso. Mas você pode colocar o seu em qualquer lugar. Desde que seja conveniente para você. Agora você já deve ter seu editor de texto configurado. Vou abrir o Visual Studio Code e depois que ele for aberto, vou arrastar o iniciador do projeto para o editor de texto. Então vamos dar uma olhada no que está incluído. Se abrirmos o index.html , são apenas dados básicos de HMO. Na seção de cabeça temos apenas algumas metatags básicas, o título. Nós também temos alguns links para bootstrap. Nós só vamos usar isso para algum estilo básico e layout. O corpo do projeto começa com uma div principal, que tem um id de aplicativo. Este vai ser o contêiner principal e vamos dar uma olhada nisso com mais detalhes quando olharmos para a instância vista. Bem, então, você só tem algumas linhas básicas e contêineres e algumas informações sobre a lista de convidados. Se abrirmos a pasta do projeto e, em seguida, se clicar duas vezes em index.html. Você pode então ver a estrutura básica do que temos. Temos uma linha que tem algumas informações sobre os eventos, como a data do evento, o título do evento e uma descrição. Nós também temos uma entrada de texto onde o usuário pode adicionar seu nome e, em seguida, enviá-lo para adicioná-lo à lista de convidados. Então abaixo disso temos outra linha e, em seguida, um geral abaixo deste, que vai ser o lugar onde todos os nomes são adicionados. No momento, diz que ainda não há nomes adicionados. Mas adicionaremos a funcionalidade ao longo desta seção para fazer isso funcionar. Sobre o app.css nós apenas temos algum estilo básico apenas para torná-lo um pouco mais agradável. O app.js está vazio por enquanto. Mas este é o lugar onde vamos adicionar a funcionalidade JS vista à medida que passamos por esta seção. Esta é apenas uma visão geral básica do que está incluído no projeto como um pacote de inicialização. Isso se tornará muito mais familiar à medida que você passar por esta seção. Em seguida, veremos como instalar o vue js e como adicioná-lo aos projetos iniciais e, em seguida, começaremos a trabalhar dentro deste app.js, dando uma olhada na instância view. 6. Instalando o Vue.js: No último vídeo, deveríamos ter baixado o iniciador do projeto, que coloquei na minha área de trabalho para facilitar o acesso. Você também deve ter um editor de texto pronto para usar. No meu caso, estou usando o Visual Studio Code. Neste vídeo, vamos mostrar alguns exemplos de como podemos começar a instalar Vue.js. Vou até o meu navegador da Web e vou usar o Chrome para o resto deste curso. Então vamos para o Vue.js.org, que é o site oficial do Vue.js. Se você clicar no guia no canto superior direito e, em seguida, uma vez carregado, você verá um menu de navegação à esquerda. Para começar, precisamos ir para o menu de instalação, e ele fornecerá algumas opções de como começar. O primeiro é como incluir Vue.js dentro de tags de script, para que possamos clicar na versão de desenvolvimento ou na versão de produção. A versão de desenvolvimento tem o modo de depuração e também os avisos. A versão de produção não tem estes e é minificado. Tudo o que precisamos fazer é clicar em um desses botões e, em seguida, obter o download, então podemos salvar esses arquivos dentro de nosso aplicativo e vincular a eles usando tags de script. Esta técnica é a mesma que incluir qualquer um dos seus scripts, como j-query. Outra opção é usar o link CDN, vamos usar para este projeto. Este é um link onde a biblioteca Vue.js é hospedada externamente. Se clicarmos no link recomendado lá, não seria levado para uma versão hospedada do Vue.js, e esta é a versão mais recente. Voltaremos a isso em instantes. A próxima opção é usar o NPM ou o Node Package Manager. Vamos usar o NPM no próximo projeto, mas por enquanto eu só quero manter as coisas simples, vamos nos concentrar no Vue. js e, em seguida, no básico. Há também o Vue.cli, que é uma maneira fácil de andaimes projetos Vue.js. Novamente, vamos usar isso mais tarde, mas por enquanto eu vou apenas ir para o link CDN e, em seguida, clique no link, e então precisamos dele copiar este link URL. Então, se voltarmos ao seu editor de texto e abrirmos os projetos. Se formos para o index.html, quando ele for para a seção principal logo abaixo do título, e depois adicionar as tags de script, e então podemos adicionar os atributos de origem e, em seguida, colar no link para o Vue. js biblioteca e, em seguida, salve isso. Isso é o quão rápido e fácil é adicionar Vue.js como um link CDN. Com Vue.js agora adicionado ao nosso aplicativo, vamos agora passar para o próximo vídeo onde vamos dar uma olhada na adição do VUE.Instance. 7. A instância do Vue e o objeto de dados: Agora temos acesso à biblioteca Vue.js usando ECD e link. Agora podemos começar a trabalhar com dentro de nosso arquivo app.js. App.js está incluído no projeto inicia. Você já deve ter baixado. Este arquivo você pode nomear qualquer coisa que você gosta. Então você é livre para escolher, se preferir. Vamos começar acessando o objeto view, e isso nos permite criar uma nova ocorrência de view digitando New View, seguido pelo parêntese e um ponto-e-vírgula. Esta nova instância de visualização vai basicamente controlar a nossa aplicação e os dados HTML a serem renderizados para a tela. Em seguida, precisamos passar em um objetos de opções, que contém várias opções, que vamos explorar ao longo deste curso, tais como visualização HTML, qual elemento HTML que queríamos montar. Ele também contém todos os nossos métodos e dados. Primeiro, vamos dar uma olhada no El. Esta palavra-chave informa qual elemento HTML controlar. No nosso caso, queremos controlar a página index.html. Então eu vou usar o principal recipiente div circundante, que daria um AID de até. Então, podemos definir o valor da string de el para ser igual a até com o prefixo de hash porque é AID. Isso é exatamente como um seletor CSS. Então, se quisermos controlar uma div com uma classe em vez de uma ID, vamos apenas substituir o hash por um ponto. Agora selecionamos nossos elementos. Queremos trabalhar com a propriedade de dados. Isso contém um objeto que armazena todos os dados que queremos usar dentro desta instância de exibição. No momento, todos os dados dentro do nosso aplicativo são apenas HTML simples, o qual Vue.js Clooney não tem controle. Por exemplo, todos os dados sobre os eventos listados, como as datas do evento, o título do evento e a descrição do evento são codificados manualmente. Podemos alterar isso, adicionando-o ao objeto de dados dentro de nossa instância view. Então vou começar a transferir esta informação codificada manualmente para a nossa propriedade de data. Então vamos começar por incluir datas. Então selecione a data a partir daí, coloque-o para fora HTML. Então, se formos para a nossa propriedade de datas, podemos definir um nome para essas datas. Então eu quero chamar meu EventDate seguido pela coluna, e, em seguida, dentro de uma string, podemos adicionar a data dentro de lá. Podemos então fazer o mesmo com o título do evento. Então, de volta na página de índice, se você colocar o nome de Summer Festival, e, em seguida, dentro de nossos dados, volta em nosso app.js, e em seguida, vamos chamar isso de EventTitle. Então, como antes, com nossos dias como uma corda. Então colando isso entre as citações. Então, finalmente, nós também faremos o mesmo para a descrição do evento. Então vá até a página de índice, coloque a descrição do evento e, em seguida, logo abaixo do EventTitle, criaremos o nome de dados EventDescription e colaremos isso como um valor. Então agora precisamos de uma maneira de adicionar esses dados de volta ao nosso HTML. Para inserir esses dados em nosso código, fazemos isso com uma sintaxe de modelo especial de chaves duplas. Você também verá isso referido como sintaxe de bigode ou interpolação de texto. É assim que ligamos nossos dados com o DOM. Isso também significa que os dados são reativos e serão atualizados quando houver uma alteração com os dados. Dentro dessas chaves, podemos adicionar o nome da propriedade date que acabamos de criar. Então vamos começar com o EventDates no lugar de onde colocamos a data pouco antes. Então vamos salvar isso e atualizar o navegador, e agora podemos ver a data está aparecendo de volta na tela. Então esta data está funcionando agora porque está dentro das chaves duplas. Então Vue.js sabe procurar esse nome de propriedade dentro do objeto data que acabamos de criar. Ele também será atualizado sempre que o valor de EventDate for alterado. Então, o que eu gostaria que você fizesse agora é exatamente o mesmo para o EventTitle e também para o EventDescription. Então faça uma pausa e dê uma chance. Se é algo que você não se sente confortável, ainda, não se preocupe. Vou continuar agora adicionando o EventTitle. Então faça o mesmo como antes. No lugar do título, adicionaremos as chaves duplas e, em seguida, adicionaremos o EventTitle. Finalmente, em um lugar onde colocamos o EventDescription também irá adicionar o EventDescription lá. Guarde isso e faremos uma atualização final só para verificar se está tudo funcionando bem. Então, não está ótimo. Temos as datas, o título e também a descrição, se [inaudível] de volta na página. Mas desta vez temos Vue.js controlando os dados. Então, finalmente, eu só quero terminar com uma última coisa. Como essas propriedades de dados livres estão relacionadas, eu vou agrupá-los dentro de seu próprio objeto de eventos. Isso é totalmente opcional, mas faz sentido especialmente se estendermos criando mais de um evento. Então, de volta dentro da propriedade de dados, queremos criar o objeto de eventos. Em seguida, vou cortar EventDate, EventTitle e EventDescription e, em seguida, certifique-se que estes colados dentro do novo objeto de evento. Agora de volta no navegador, se fizermos uma atualização, veremos que os dados desaparecem. Isso é porque precisamos dizer ao Vue que essas propriedades e agora dentro de um objeto chamado eventos. Então isso significa apenas fazer mais uma mudança dentro da página de índice. Então, tudo o que precisamos fazer é nossos eventos na frente de EventDates, o mesmo com EventTitle, e, finalmente, o mesmo com EventDescription. Então aperte salvar. Agora, se voltarmos para o navegador e dar uma atualização, devemos ver que todos os nossos dados estão de volta na tela. Então agora criamos nossa instância do Vue e analisamos como usar o objeto de dados para controlar um texto dentro de nossa aplicação. Em seguida, vamos dar uma olhada em como o Vue JS lida com modelos e utiliza o DOM virtual. Te vejo lá. 8. Modelos e o DOM virtual: No último vídeo, analisamos como criar uma instância do Vue e também como adicionar dados reativos ao nosso aplicativo. Como o Vue js gerencia os dados para torná-los reativos e atualizar nossa página quando há uma mudança? Mas vamos dar uma olhada no que acontece em segundo plano. Se formos para as ferramentas de desenvolvedor do navegador dentro do Chrome, podemos acessá-las com um botão direito do mouse e, em seguida, selecionar “Inspecionar”. Se, em seguida, selecionar o Div com a classe de bloco de cartão, podemos dar uma olhada no conteúdo e podemos ver que o título do evento, as datas do evento, e a descrição do evento é adicionado entre P-tags ou cabeçalhos. Portanto, a saída HTML é diferente do que digitamos dentro do Editor. Nós não temos nenhuma sintaxe de chave dupla e não podemos ver os nomes de nossas propriedades de dados, como título do evento. Isso ocorre porque Vue.js pega nosso código HTML e cria um modelo baseado nele nos bastidores. Este modelo, que é criado não é usado para renderizar para o DOM com código HTML válido. Usar um modelo em vez de atualizar diretamente o DOM com nosso código também fornece benefícios adicionais. Quando nossos dados, por exemplo, são atualizados dentro do aplicativo, Vue descobre quais partes do modelo são alteradas. Uma vez que o Vue está ciente de exatamente qual parte é alterada, ele só rerenderizará essa parte de alteração do modelo. Então, retornando apenas a quantidade mínima de código para o DOM real. Isso tem o efeito de tornar nossos aplicativos Vue.js realmente rápido, já que manipular o DOM é normalmente uma das operações mais caras para executar. Se você não estiver familiarizado com o DOM, ele significa Document Object Model. É uma representação estruturada de documentos. No nosso caso, o documento é a página web. Na maioria dos casos simples, o DOM, que é criado, parece nosso código HTML, que estava certo e aqui vemos representações visuais típicas do DOM, que é como uma árvore de objetos começando com os elementos HTML no topo e, em seguida, temos a seção da cabeça e a seção do corpo, e, em seguida, todos os nossos elementos aninhados contidos dentro da seção da cabeça da seção do corpo. Portanto, isso deve parecer familiar para você se você já teve alguma experiência em HTML. Como os elementos DOM necessários obtidos leva tempo, Vue.js também usa o que é chamado de DOM virtual. Estes modelos que Vue. js cria um compilado em funções de renderização DOM virtuais. O DOM virtual é como uma cópia do DOM real e isso permite ver os bastidores para comparar o DOM real com o DOM virtual e apenas atualiza onde e quando é necessário. Então não se preocupe muito se você não entender bem o que tudo isso significa por enquanto. Temos muita prática sobre como o Vue funciona e como ele renderiza modelos conforme você vai para o curso. Então é assim que Vue.js funciona com modelos e também o DOM virtual. Eu só queria te dar um pouco de fundo sobre o que está acontecendo nos bastidores quando estamos escrevendo nosso código. Em seguida, vamos olhar para a mineração de dados bidirecional usando uma diretiva de modelo V. 9. Associação de dados de via dupla com v-model: Analisamos a criação da nossa instância do Vue e adicionamos os objetos de dados. Eu quero definir uma nova propriedade de dados, mas desta vez eu vou usá-lo com uma diretiva vista chamada v-model. As diretivas têm um prefixo -v, e você as verá muito ao longo deste curso. Os atributos especiais fornecidos pelo Vue.JS, que adicionam um comportamento reativo especial ao DOM usando v-model configura a vinculação de dados bidirecional. Se você não estiver familiarizado com ligação de dados bidirecional, isso significa apenas que os dados podem ser passados em ambos os sentidos. Nos exemplos que analisamos até agora, podemos atualizar as propriedades dentro dos objetos de dados e, em seguida, essas alterações são passadas para o Vue. Com ligação de dados bidirecional, ainda podemos fazer isso, mas também podemos atualizar os elementos do Vue, como campos de entrada e isso atualiza o valor de nossos dados. Vue.JS torna este fluxo de dados bidirecional muito simples, fornecendo-nos com esta diretiva chamada v-model. Vamos começar definindo v-model em nossos campos de entrada de texto. Se você passar para a nossa página index.html e, em seguida, localizar nossas entradas de texto, podemos adicionar v-model e, em seguida, definir o nome da propriedade data deseja vincular a. Então, no nosso caso, “NovaMetext”. Em seguida, precisamos definir NewnaMetext como uma propriedade nos objetos de dados. Desta forma, podemos definir o valor inicial se quisermos, e como é bidirecional data mining também podemos atualizar o valor com o campo de entrada. Então, em app.js fora do objeto events adicionar nossa propriedade de NewnaMetext: Então eu vou definir o valor inicial de NewnaMetext para ser igual a uma string vazia. Podemos adicionar um valor inicial dentro disso, se quisermos. Então, para ver o valor de NewnaMetext, só precisamos ir para a página index.html e, em seguida, usar a sintaxe de chave dupla para produzir o NewnAmetext. Agora, se escrevermos algo dentro do campo de entrada, veremos o valor de NewnaMetext atualizado imediatamente. É assim que podemos usar ligação de dados bidirecional com Vue.JS. Uma coisa importante a lembrar é que Vue.JS não se preocupa com o espaço reservado ou o valor inicial dos campos de entrada. Os dados dentro da instância do Vue sempre serão uma prioridade e considerados corretos sobre o valor inicial dos campos de entrada. Vamos cobrir usando v-model pesado sobre tipos de entrada e áreas de texto mais tarde no curso. Por enquanto, porém, vamos seguir em frente e dar uma olhada em manipuladores de eventos e como podemos pegar os nomes adicionados a este campo de entrada e empurrá-los para uma matriz. 10. Manipulação de eventos e métodos: Agora analisamos a ligação de dados bidirecional. Eu quero agora passar para capturar o valor inserido nos campos de entrada e, em seguida, empurrá-lo para uma matriz. Esta matriz irá conter todos os nomes inseridos no campo de entrada e, em seguida, podemos listar todos esses nomes dentro da seção de assiduidade abaixo. Queremos ir para o app.js e criar nossa matriz vazia. Vou adicionar uma nova propriedade de dados chamada nome do convidado e inicialmente vamos definir isso para uma matriz vazia. Agora isso é criado em index.html. Agora precisamos criar um manipulador de eventos para empurrar os nomes para esta matriz. Uma vez que o botão de envio foi pressionado, em vue.js, usamos o V na Diretiva para ouvir eventos DOM. Estes eventos DOM e não específicos para view.js. Podemos usar qualquer um dos eventos DOM normalmente disponíveis para nós, como OnClick, keyup, keydown e muitos, muitos mais. Novamente, assim como no último vídeo onde usamos V-model, esta directiva também tem o prefixo traço v. Em seguida, localizamos nossos elementos de formulário e, em seguida, como um atributo, podemos adicionar o nosso V na diretiva. Primeiro adicionamos V em e, em seguida, após os dois-pontos, adicionamos o nome do manipulador de eventos que queremos acionar. No nosso caso, vamos ouvir o evento de envio e em seguida, adicionamos o nome do método que queremos executar uma vez que o formulário foi enviado. Após o nome dos eventos, no nosso caso de mitos, também podemos adicionar modificadores de eventos. Um modificador de evento comum é evitar os padrões. Se você usar JavaScript para trabalhar com entradas e formulários de todos, você pode já ter usado o evento dot previne default. Isso interrompe o comportamento padrão, que para o botão enviar é atualizar a página. Poucos apenas torna isso realmente fácil para nós abordar o comportamento para nossos manipuladores de eventos simplesmente adicionando-o após o nome do manipulador de eventos exatamente como este. Evite o padrão, vamos impedir que nossos dados sejam perdidos quando a página for atualizada. Isso também sobre os modificadores de evento também, que cobriremos mais tarde neste curso. Por enquanto, adicionamos formulário enviado como o nome do nosso método, mas ainda não o criou dentro da nossa instância de visualização. Vamos fazer isso agora no aplicativo dot js. Assim como quando adicionamos os objetos de propriedade de dados dentro da instância de exibição, também podemos usar a palavra-chave métodos reservados. Métodos também leva em um objeto, então vamos abrir um conjunto de chaves. Dentro daqui podemos adicionar nosso primeiro método de formulários enviados. Este método é acionado cada vez que o formulário é enviado. Formulário submetido é uma função e dentro desta função podemos começar adicionando um log de console, apenas para verificar se isso está funcionando bem. Queremos registrar para o console o valor do novo texto de nome, que está vinculado ao campo de entrada. Esta palavra-chave nos permite acessar todas as propriedades dentro da instância view. Para acessar a nova propriedade de texto de nome, usamos este texto de nome novo ponto. Vimos muito isso ao longo do curso. Agora vamos voltar para o aplicativo e, em seguida, entrar no console. Podemos digitar um nome dentro do campo de entrada, e devemos ver o valor que aparece dentro do console. Agora sabemos que este método está sendo acionado bem. Agora podemos terminar nosso método empurrando o novo valor de nome para a matriz de nome de convidado. Vamos primeiro remover o log do console, e no lugar disso podemos selecionar este nome de convidado ponto, que é o nome do nosso array. Como este é um array, podemos usar o método push. Em seguida, dentro dos colchetes, vamos dizer vue.js, O que queremos empurrar para a matriz. No nosso caso, queremos empurrar o valor dos campos de entrada, para que possamos selecionar nossa palavra neste, ponto texto novo nome. Em seguida, para terminar este método, a última coisa que eu quero fazer é uma vez que um nome está sendo adicionado à matriz, queremos apenas limpar o campo de entrada definindo este texto de nome novo ponto para mais uma vez definido para uma string vazia. Para ver os valores que estão dentro da matriz, podemos usar textos interpolação novamente, ou a sintaxe de chaves duplas para produzir isso dentro do index.html. Se olharmos para o cabeçalho de nível quatro, que tem o texto de nenhum nome adicionado ainda, podemos usar a sintaxe de chave para produzir a matriz de nome de convidado. Agora vamos salvar isso e vamos para o Chrome e atualizar o navegador. Agora podemos adicionar nomes ao campo de entrada e agora apertamos enviar. Isso agora deve ser empurrado para o array e, em seguida, enviado para a tela. Temos os novos nomes agora adicionados à matriz, o que é ótimo. Os nomes são apenas exibindo como eles estão dentro da matriz, então no momento ele não parece muito bom. Mas não se preocupe, vamos consertar isso no próximo vídeo. Vamos dar uma olhada na renderização de listas com loops For. 11. Processamento de lista: Agora pegamos as entradas de nome de usuários e empurrá-lo para uma matriz quando o botão de envio é pressionado. Fizemos isso adicionando um ouvinte de evento ao formulário e, em seguida, chamando um método quando o formulário é enviado. Este método dentro da instância do Vue é algum código JavaScript que leva o conteúdo do campo de entrada armazenado dentro de novos textos de nome e, em seguida, empurra-o para esta matriz GuestName. Agora temos a matriz GuestName que queremos fazer loop através desses nomes e, em seguida, renderizá-los para a tela. Vue.js, como JavaScript normal pode fazer isso com um loop for. No entanto, o Vue torna a criação de um loop for muito mais simples e mais limpo do que usar o JavaScript Vanilla. Tudo o que temos de fazer é criar uma directiva “V for” como esta. Se formos até a página Index.html e, em seguida, role para baixo em direção à bomba. Se procurarmos a div com uma classe de cartões de sucesso arredondado e nome-caixa, vamos adicionar o nosso loop for a esta div. Então, adicionar isso para loop é tão simples como adicionar atributos, assim como antes quando usamos v-model, mas desta vez usamos v-for, e então o que é definido é ser igual ao nome em GuestName. Então este primeiro nome é totalmente com você, você pode nomear o que quiser. É apenas um alias para cada elemento de matriz que irá loop over, guestName é o nome da matriz de origem, por isso é o que acabamos criar antes e é a saída do conteúdo deste para loop, usamos a interpolação novamente. Então você vê chaves duplas e, em seguida, digitamos no nome, que temos usado no loop for. Então agora podemos salvar isso, atualizar o navegador e agora, se formos até as entradas, podemos começar a adicionar nomes e agora vê-los saída para a tela , mas desta vez usando um loop for v-for também pode ser adicionado a mais elementos. Não estamos limitados a admitir um div. Ele pode ser adicionado a um span, tags de parágrafo ou qualquer coisa que você gosta. Então agora vemos o conteúdo da matriz exibir duas vezes, uma vez usando o loop for e, em seguida, uma vez do último vídeo, onde nós emitimos o guestName/ com o guestName dentro das chaves e salvar isso e agora nós somos apenas deixados com o conteúdo do loop for. Então é assim que é fácil criar um loop for usando Vue.js. Agora vamos passar para a renderização condicional onde vamos olhar se mais declarações usando Vue. 12. Processamento condicional no Vue: Nosso aplicativo agora está indo bem. Quando adicionamos um nome à caixa de entrada e pressionamos “Enviar”, o nome é adicionado à div assistente para baixo na parte inferior. Como você pode ver, ainda temos o texto dizendo que nenhum nome foi adicionado ainda. Agora queremos olhar para a renderização condicional. A renderização condicional não é tão complicada quanto pode parecer. Ele simplesmente irá renderizar algum conteúdo dependendo das circunstâncias, assim como um JavaScript if-else instruções normais, se você estiver familiarizado com estes. No nosso caso, se houver nomes dentro da matriz de nomes de convidado, queremos exibi-los na parte inferior. Se não houver nomes dentro da matriz, só queremos mostrar o texto dizendo que não há nomes adicionados ainda. Podemos adicionar isso dentro da página index.html. Se localizarmos a div com a classe de bloco de cartas, dentro do nosso div com a classe de bloco de cartas, temos dois divs dentro de lá. A primeira é onde queremos percorrer os nomes e exibi-los dentro das tags div. Vou adicionar uma afirmação “se” a esta div. O Vue faz com que seja muito fácil para nós fazer com a directiva “V-Se”. Depois de adicionar isso como um atributo, queremos verificar se o comprimento da matriz de nome de convidado é maior que zero. Se houver algum nome dentro da matriz, a condição torna-se verdadeira e a div é então renderizada para a tela. Caso contrário, se a matriz estiver vazia, então a condição é falsa. A seguinte div será processado se adicionarmos uma declaração v-else. Então vamos adicionar v-else para a seguinte div. Para que o v-else funcione, deve seguir imediatamente os elementos com a directiva v-if. Se, por exemplo, houvesse outra div entre esses dois, a declaração else não funcionaria. Dê um salvamento e vá para o navegador e dê uma atualização. Agora vamos ver a declaração dizendo que nenhum nome foi adicionado ainda. Então, se vamos até a nossa caixa de entrada e adicionar um nome, vemos o nome é adicionado e também o texto é removido. Tais estão funcionando bem e eu quero adicionar um JavaScript normal se declaração ao nosso formulário submetido método ea razão para isso é se vamos para o nosso formulário, e nós inserimos um nome, podemos ver adicionado à lista. Então, isso é bom. No entanto, se apenas ir para a entrada e pressionar enter sem um nome, ainda podemos ver que algo é adicionado à matriz. Além disso, if-statement irá certificar-se de que o nome deve ser inserido antes que ele é empurrado para a matriz. Podemos fazer isso no método formulário enviado no arquivo app.js. Dentro do corpo da função vamos construir o código existente com um if-statement e a condição que queremos verificar é se this.NEWNAMEText. Comprimento é maior que zero ou se alguns caracteres foram inseridos, então queremos ir em frente e empurrar isso para a matriz. Vamos dar a isso um salvo e testar isso no navegador. Se apertarmos “Enter” na entrada do formulário, vemos que nenhum novo nome foi adicionado à matriz. Vamos apenas adicionar um novo nome e testar que está funcionando bem. Lá vamos nós, então todo o p está bem. A última coisa que eu quero fazer neste vídeo é mostrar quantos convidados estão participando ou quantos nomes temos dentro da matriz. Você pode ver se você apenas olhar acima dos nomes, podemos ver que há uma div com a classe de cabeçalho do cartão com uma seção de atendimento. Dentro dos colchetes eu vou adicionar as chaves duplas e, em seguida, descobrir quantos nomes estão dentro da matriz de nomes de convidado. Nós simplesmente digitar guestName.length e isso irá produzir quantos itens estão dentro da matriz. Vamos salvar isso e adicionar alguns nomes à matriz e ver se isso funciona. Ótima. Então vemos isso aumentando em um com cada nome. Agora isso funciona porque o comprimento do ponto é apenas uma propriedade JavaScript e podemos adicionar qualquer JavaScript que queremos dentro dessas chaves duplas. Não estamos limitados apenas à saída de dados da nossa instância do Vue. Por exemplo, se adicionarmos 8 mais 10 também dentro das chaves duplas e, em seguida, passar para o nosso aplicativo, podemos ver que 10 é adicionado a cada número. Então, vamos apenas remover isso porque não é necessário para o nosso aplicativo. Esperemos que agora você pode ver que agora podemos misturar dados do Vue e também JavaScript de Vanilla e vamos olhar para isso mais tarde no curso, mas por agora isso é como renderização condicional ou instruções if-else funcionam no Vue JS e você pode agora realmente ver como é simples trabalhar com eles. 13. Associando elementos a atributos: Eu quero agora mostrar a vocês como usar uma diretiva chamada v-bind. Usamos esta diretiva para trabalhar com atributos HTML normais, como classe, fonte e os atributos href. Estes são todos apenas atributos HTML normais. No entanto, não podemos passar em dados reativos para eles usando a sintaxe de chave dupla. Então, no index.html, se localizarmos a div data do evento com a classe de card-header, ele tentaria adicionar uma nova classe com o nome de [inaudível] e adicionar isso usando uma sintaxe de chave dupla, isso não vai realmente funcionar. Então, para demonstrar isso, vamos adicionar uma nova propriedade em app.js dentro dos objetos de dados, logo abaixo da matriz GuestName. Então vamos adicionar 'FormSubmitClass'. Usaremos isso para adicionar um novo nome de classe sempre que nosso formulário for enviado. Para mudar a cor de fundo da div com cabeça do cartão e também o botão azul para verde, eu vou definir inicialmente isso para ser uma string vazia. Para começar, porque nós só queremos adicionar uma classe quando o formulário é realmente enviado, então para baixo no método formulário enviado, bem na parte inferior, eu vou adicionar o FormSubmitClass, e então nós podemos definir isso para ser algo novo cada vez que o formulário é enviado. Então eu vou definir isso para ser uma cadeia de texto de Submetido. Então, agora, cada vez que um formulário é enviado, FormSubmitClass será definido como o valor Submetido. Agora no CSS, podemos definir o SubmittedClass para ter uma cor de fundo verde. Então vamos salvar isso e ir para o navegador. Então você pode ver se atualizamos e, em seguida, pressione o botão Enviar, que a cor do plano de fundo não muda. Portanto, este é o comportamento esperado porque mencionamos antes que os cartões adicionar dados dinâmicos como um atributo. Então, para aplicar esta classe em HTML, precisamos fazer duas coisas. Primeiro, precisamos remover as chaves da classe e apenas ter a propriedade de dados dentro das causações. Em seguida, em segundo lugar, precisamos adicionar o prefixo v-bind ao nome do atributo. Então, agora vale a pena notar, como você pode ver dentro deste elemento, temos dois atributos de classe. Uma é a classe HTML estática que você ainda pode usar e também a que acabamos de adicionar com v-bind, que é reativo e sob o controle de view.js. Nós também podemos vincular este atributo em mais de um elemento, também. Então vamos adicionar o FormSubmitClass ao SubmitButton, também. Isso também significa que, se nossos dados mudarem, a atualização também será refletida em todos os lugares . Então, agora vamos dar uma chance. Se salvarmos isso e, em seguida, atualizar o navegador e adicionar um nome, podemos ver uma vez que o formulário é enviado que obtemos a nova cor de fundo. Então, apenas como uma breve recapitulação do que fizemos lá, entramos na página HTML e, em seguida, adicionamos uma classe de FormSubmitClass. Em seguida, dentro de nossos objetos de dados, definimos este FormSubmitClass para estar vazio originalmente. Portanto, isso significa que inicialmente nenhum novo estilo é adicionado. Em seguida, mudamos sua string vazia para ser o texto de Submetido, logo abaixo dentro do método FormSubmit. Assim, cada vez que o formulário está sendo enviado, o texto de Submetido é adicionado como uma classe. Portanto, não estamos limitados a apenas vincular a classes, mas combinados a qualquer atributo HTML normal também, como podemos adicionar um atributo fonte se estamos trabalhando com imagens e ter o caminho do arquivo de imagem controlado pela visão. O mesmo com a adição dos atributos de estilo, e é isso que veremos no próximo vídeo. 14. Associando estilos: Agora sabemos como usar a diretiva v-bind para vincular vue.js com atributos HTML. Agora vamos ver como usar a mesma diretiva que os atributos de estilo. Não, não podemos passar um duplo colchetes ou a interpolação, que você apontou no último vídeo. No entanto, desta vez, podemos usar as chaves únicas. Isso ocorre porque estamos passando em um estilo objetos e objetos dentro de um JavaScript que é cercado por chaves. Assim como nosso objeto de dados dentro da instância view. Se você usou reagir. JS antes, esta forma de um estilos inline vai parecer familiar para você. Então, se passarmos para o nosso arquivo CSS para a linha e, em seguida, clique na margem superior de 25 pixels. Quando eu quiser tirar isso fora do CSS e colocá-lo em nosso HTML. Então, na página de índice, se localizarmos a div com a classe de linha, que está logo acima do nível um cabeçalho da lista de convidados. Vou vincular atributos de estilo a esta linha e, em seguida, também definir o valor dentro de um objeto e, em seguida, colar na margem superior. Ele irá apenas copiá-lo do CSS. Então vamos guardar isso e nos dar uma chance e ver o que acontece. Então, se atualizarmos o navegador, podemos ver que há uma página em branco. Então isso não parece estar funcionando. Se clicar com o botão direito do mouse e ir inspecionar para abrir as ferramentas de desenvolvimento, podemos ver dentro do “Console” que há uma mensagem de erro vermelha. Então, obtemos este erro porque este é JavaScripts, Entre as chaves e precisamos nomear as propriedades CSS usando camelo caso. Isto significa que a primeira palavra é minúscula e, em seguida, cada palavra seguinte começa com uma letra maiúscula como esta. Então, a margem é minúscula, seguido por topo com um T. Em seguida, note também que o valor de 25 pixels é uma string. Então podemos embrulhar isso dentro de nossas cotações e remover o ponto-e-vírgula. Vamos ver como isso está parecendo agora. Então salve e, em seguida, vá para o navegador. Então tudo parece como deveria, o que é ótimo. Há também outra maneira de adicionar estilos ao nosso aplicativo. Também podemos declarar o nosso estilo dentro da instância vista como uma propriedade de dados. Então de volta para o aplicativo. j s, abaixo do formulário submetido classe que criamos no último vídeo. Vou adicionar uma nova propriedade de data chamada “AppStyles”. Isso vai ser definido como um objeto. Em seguida, dentro deste objeto eu vou adicionar a mesma classe de margem superior, novamente usando a caixa de camelo e definir para 25 pixels. Agora, como mencionamos, não podemos injetar esses dados reativos em nosso HTML com as chaves duplas. Nós não poderíamos usar chaves duplas em tudo com quaisquer atributos. Isso inclui os atributos de estilo. Então, em vez disso, no HTML, podemos incluí-lo dentro das citações. Vamos remover o objeto existente e adicionar nossos novos estilos de aplicativo dentro de lá. Este HTML faz referência a um dado dentro de nosso objeto estilos de aplicativo. Claro que também podemos adicionar mais estilos dentro desses objetos, se quisermos. Ou você pode usar este objeto várias vezes dentro do nosso aplicativo. Este estilo em particular aplica-se a todos os nossos div gratuitos com a classe de linha. Então vamos reutilizar isso em todas as nossas div gratuitas para obter o estilo correto. Então eu vou copiar a propriedade de estilo. Eu colo na segunda fila. Em seguida, faça o mesmo para a terceira linha. Então vamos testar isso. Pressione Salvar e, em seguida, vá para o navegador. Podemos ver que o aplicativo olha para trás ao normal. Então, só para checar duas vezes, está tudo funcionando bem. Vou passar para o objeto AppStyles mais uma vez e adicionar uma cor de vermelho. Como você pode ver, todas as alterações feitas no objeto de estilo são alteradas em todo o aplicativo. Então, essas são algumas maneiras diferentes de adicionar CSS ao nosso aplicativo. Também usaremos isso novamente no próximo projeto. Mas, por enquanto, passaremos para o próximo vídeo. Vamos dar uma olhada na sintaxe abreviada. 15. Sintaxe abreviada do Vue: Como ele começa a construir projetos maiores tanto mais tarde neste curso e espero que por conta própria no futuro. Vale a pena conhecer algumas maneiras de tornar nosso código um pouco mais compacto. Mesmo no pequeno aplicativo até agora, temos usado o V em e V se liga bastante algumas vezes já. Por esta razão, view nos fornece um pequeno atalho para tornar a sintaxe mais compacta. Para o V por subativo, tudo o que realmente precisamos fazer é remover V-binds, deixando apenas os dois pontos e o atributo que estamos vinculando. Vamos abrir o nosso index.html e vamos em frente e substituir todos os nossos atributos de ligação com a sintaxe abreviada. Vou te mostrar o primeiro. Se formos para a primeira linha, encontramos o estilo dos estilos de aplicativos. Nós só precisamos remover a ligação V, deixando apenas o cólon e estilo, e claro, isso é algo que você poderia ir em frente e fazer você mesmo se você quiser pausar o vídeo e ir para a página de índice e nos dar uma chance, e então é claro que voltar quando concluído. Vou continuar me movendo para baixo, cima e mudando isso. Nós também temos a segunda linha logo abaixo com os estilos do aplicativo também. Vamos mudar isso. Nós não temos o “cabeçalho do cartão” com a classe do formulário “enviar classe”. Vamos mudar isso e, em seguida, rolar para baixo. Nós também temos a classe no lado de entrada, e então um pouco mais para baixo, parece que a última é a linha final com a classe de “estilos de aplicativo”. Vamos mudar isso. Mas também é uma abreviação para quando se usa v-on. Usamos v-on dentro dos elementos do formulário para acionar um método cada vez que o formulário foi enviado. Em vez de usar v-on, podemos simplesmente substituir isso com o símbolo at. Vamos em frente e substituir isso agora. Vamos dizer isso e apenas verifique novamente se ainda funciona no aplicativo. Nosso estilo parece estar funcionando também. Parece que as classes ainda está vinculá-lo, e agora se adicionarmos um nome para a entrada do formulário, vemos que o nome ainda é adicionado à lista de convidados, o que significa que o botão enviar ainda está funcionando. A sintaxe abreviada é opcional e mal caminho é totalmente bom. Como ver JS lida com sempre em segundo plano. Mas para o resto deste curso, usaremos a sintaxe mais curta apenas para manter nosso código mais compacto. 16. Gerando texto e HTML de saída: Até agora, neste curso, nós produzimos dados reativos usando interpolação ou a sintaxe de chave dupla. Agora, quero apresentar-vos mais algumas directivas que poderão ser muito úteis na saída de dados. Primeiro é um simples chamado v-text. V-text é usado para obter o conteúdo de texto elementos. Conteúdo de texto, define ou retorna o conteúdo de texto de um elemento. Podemos usá-lo como uma alternativa para dobrar chaves para executar o texto assim se formos para nossa página de índice e localizar o bloco de cartão, que tem a informação do evento. Dentro do nível para cabeçalho, podemos adicionar o v-text como atributos e também definir este igual ao título event.event. Você pode notar que temos o título event.event duas vezes; um está usando v-text e outro está usando a interpolação de texto original. No entanto, se formos para o navegador e atualizar, só podemos ver este título exibido uma vez. Isso ocorre porque o uso do título original precisa de chaves duplas é substituído pela definição dos atributos de conteúdo de texto. Podemos provar isso passando para v-text e alterando isso para Event.EventTitle2. Então, se passarmos para app.js, podemos adicionar nosso EventTitle2, logo abaixo do título do evento original e queremos definir isso para uma string de saída v-text para que possamos ver claramente a diferença. Depois de adicionar, vamos para o navegador e depois atualizar. Ainda podemos ver que o v-text terá prioridade, mesmo que as chaves duplas ainda estejam no lugar. A próxima directiva que quero analisar é v-html. Textos em V, que acabamos de ver, atualiza o conteúdo do texto dos elementos. Considerando que usando v-html, obtemos os elementos em HTML. Você pode estar familiarizado com alguns em HTML se você já usou JavaScript antes. v-html se você usou para produzir HTML real. Se tentarmos adicionar código HTML dentro das chaves duplas, ele será interpretado como texto simples. Vamos dar uma olhada nisso em ação, se voltarmos para a página de índice com nossas informações do evento. Se recortarmos o texto ou adicionar nome à lista de convidados para ofertas exclusivas. Assim poderia isso. Então, se passarmos para o app.js, podemos adicionar uma nova propriedade dates de textos de inscrição e, em seguida, colar isso em como uma string, então salve isso e, em seguida, se você adicionar algum conteúdo, como adicionar as tags m em torno da palavra exclusiva. Agora vamos fazer mostrar texto e HTML. Vamos tentar renderizar isso na página de índice. Se voltarmos para onde acabamos de cortar o texto e vamos tentar produzir isso com as chaves duplas, então event.SignupText e, em seguida, salvar isso. Se atualizarmos o navegador, o HTML é emitido como texto, para que possamos ver as tags HTML. Isto não é o que queremos. Em vez disso, para exibir isso corretamente, precisamos adicionar o texto de inscrição para a diretiva v-html. Vamos adicionar v html como um atributo e, em seguida, remover as chaves e agora eu aperto “Salvar”. Agora, se atualizarmos os dados é processado como HTML e agora temos a palavra exclusiva enfatizada como pretendemos. No entanto, precisamos ser cautelosos ao usar v-html por razões de segurança. Em qualquer lugar onde HTML é adicionado dinamicamente ao nosso site, só devemos usar v-html em conteúdo confiável. Não devemos permitir que ele seja usado quando o conteúdo é fornecido por um usuário final, pois isso pode levar a potenciais ataques de script entre sites, então fique ciente disso. Além disso, se estamos trabalhando apenas com texto, usar v-text para obter o conteúdo de texto pode ser mais seguro e também ajudar contra esses ataques. Ele também pode ter melhor desempenho para texto simples 2, como um texto não é passado como HTML. Finalmente, a última diretiva que quero mostrar neste vídeo é v-once. Isso pode ser usado para renderizar dados apenas uma vez. Uma vez que os dados são renderizados usando view, se os dados são inalterados, os elementos ou componentes não serão atualizados ou re-renderizados. Isso pode ser usado para otimizar o desempenho do nosso aplicativo para evitar re-renderização desnecessária. Nosso título do evento pode ser um bom caso de uso para isso, pois podemos esperar que uma vez que um evento é criado, o nome permaneça o mesmo. Tudo o que precisamos fazer para habilitar a única renderização deste é adicionar a diretiva v-once aos elementos. Vamos remover este atributo v-text e, em seguida, substituí-lo por v-once. Isso agora significa que os dados serão carregados apenas uma vez e não para quaisquer alterações de dados no futuro. No momento, não podemos demonstrar uma vez que não estamos usando um servidor web para servir nossa página momentos, de modo que os dados não serão atualizados de qualquer maneira a partir da instância de exibição. Simplesmente abrimos a página de índice para ver no navegador. Podemos ver isso em ação em um vídeo posterior, onde usaremos um servidor de desenvolvimento. Mas, por enquanto, você pode ver que isso está disponível, se necessário. É assim que podemos usar as directivas v-text, v-html e v-once. Em seguida, vejamos uma alternativa ao v-if, que analisamos no início desta seção. 17. V-if vs v-show: Analisámos a directiva v-if anteriormente nesta secção. Isso nos permitiu mostrar os nomes dos convidados na div na parte inferior da página, caso existam nomes. Caso contrário, exibimos o texto de nenhum nome adicionado ainda. Há também uma sintaxe alternativa que Vue.js torna disponível para nós chamado v-show. Esta é também uma directiva que condicionalmente torna algum conteúdo, tal como quando se usa v-if. No entanto, existem algumas diferenças que vamos analisar agora. Primeiro, se formos para a nossa página de índice e procurarmos as declarações v-if, isso muda para v-show. Se salvarmos isso e, em seguida, passar para o nosso aplicativo e, em seguida, clique em atualizar, a primeira coisa que veremos é o texto dentro da condição mais desapareceu. Esse comportamento é esperado. Como é claro, uma declaração v-else só pode seguir uma declaração v-if. Se formos para o console, podemos ver que esse erro está destacado dentro de lá. Há também outra diferença acontecendo nos bastidores, que se relaciona com a forma como o elemento é renderizado. Ao usar v-if, o elemento ao qual está vinculado é adicionado ao DOM quando a condição se torna verdadeira, então ele é destruído ou completamente removido do DOM quando a condição se torna falsa. Portanto, como v-if só é renderizado quando necessário, ele pode economizar no tempo de renderização se isso for uma preocupação. V-show funciona um pouco diferente. O elemento v-show é anexado a é sempre renderizado, independentemente se a condição é verdadeira ou falsa para começar. Em seguida, ele é ativado ou desativado alterando a propriedade de exibição CSS. Vamos dar uma olhada nisso em ação. Se abrirmos as ferramentas do desenvolvedor e ir para Inspecionar, podemos ver isso em ação selecionando a div dentro da div de bloco de cartão, que a propriedade de exibição está definida como none, que tem o efeito de ocultar os elementos. Se, em seguida, adicionar um nome para o campo de entrada, vemos que a propriedade display de none é então removida e agora vemos que as tags div com o nome é adicionado. Para o caso deste aplicativo em particular, também precisamos usar a diretiva v-else. Então eu vou ficar com o uso de v-if e v-else. No entanto, usar v-show é uma boa alternativa se você quiser manter seus elementos dentro do DOM e apenas escondê-los, vez de destruir completamente e re-renderizar no DOM quando necessário. A diferença de desempenho entre alternar a propriedade de exibição versus renderização usando v-if pode nunca ser um problema para você, mas vale a pena saber a diferença, especialmente em aplicativos de maior escala. 18. Usando expressões do Javascript: Dentro do nosso aplicativo, temos exibido alguns dados interativos adicionando propriedades de datas em nossa instância de visualização. Então eu vou colocá-los usando as chaves duplas. Ao usar essas chaves, podemos fazer mais do que apenas adicionar o nome da propriedade date que você deseja exibir dentro de nossos templates. Podemos realmente fazer uso de expressões JavaScript ou até mesmo combinar nossos dados de visualização com JavaScript regular. Primeiro, vamos ao nosso app.js e adicionar alguns nomes em nossa matriz de nomes de convidado. Apenas para exibir inicialmente, você pode usar os nomes que desejar. Vou adicionar os nomes de James, Chris e Sam. Se você estiver usando nomes diferentes, verifique se esses nomes e misturados. Não estão em ordem alfabética. Veremos por que em breve. Guarde isso. Se passarmos para o navegador, podemos ver esses nomes são inicialmente adicionados. Agora vamos para a nossa página de índice e dar uma olhada em como podemos usar expressões JavaScript dentro de nossas chaves duplas. Atualmente dentro do loop completo estamos produzindo o nome. Podemos combinar isso com JavaScript, como usar dois minúsculos. Isto irá certificar-se de que qualquer cápsula como dentro do nome é alterado para minúsculas. Vamos dar uma olhada nisso dentro do navegador. Agora podemos ver que a primeira letra de cada nome é agora minúscula. Esta é uma mistura de usar vue.js e JavaScript regular. Nós também podemos ir ainda mais longe e adicionar uma string até o final deste. Nome ponto dois minúsculos, em seguida, mais uma cadeia de é incrível. Dê uma chance a isso. Em seguida, no Chrome, vamos atualizar. Agora temos a string adicionada no final do nome. Há uma limitação, no entanto, que só podemos usar uma única expressão JavaScript. Não podemos usar coisas como uma declaração “if else “dentro daqui. Também não é o caminho a seguir se estamos usando o mesmo código uma e outra vez. Restringir a quantidade de JavaScript que podemos usar dentro de nossos templates torna nosso código mais gerenciável. Como então precisamos mover toda a lógica complexa dentro da instância vista. Isso torna nosso código mais reutilizável. Podemos reutilizá-lo em diferentes áreas do nosso aplicativo quando necessário. Vamos olhar para como lidar com condições mais complexas na próxima seção. Mas isso é útil para executar tarefas simples. Também temos acesso a todo o poder do Javascript, mesmo quando não estiver usando dados vue.js. Adicione chaves pequenas logo abaixo. Por exemplo, podemos adicionar um cálculo matemático. Cinco divididos por dois. Vamos ver na tela. Ok, e também estraga isso, se voltarmos para a página de índice, podemos adicionar um ponto matemático aleatório, por exemplo. Ponto matemático aleatório entre as chaves e, em seguida, salve. Agora também podemos ver o número aleatório na tela também, bem, não apenas restrito à saída e este JavaScript usando chaves duplas. Você também pode usá-lo em qualquer lugar que tenhamos acesso à nossa instância view. Por exemplo, também podemos usá-lo dentro de nossa diretiva V HTML dentro das cotações. Vamos até a diretiva HTML V. Então, dentro das citações, podemos adicionar o ponto matemático aleatório e salvar isso. Agora, se atualizarmos a página e verificar, veremos um número aleatório agora na tela. Eu só vou mudar rapidamente de volta para o nome e salvar isso. É assim que podemos usar todo o poder do JavaScript dentro de nossos modelos de visão. 19. Desfecho da seção: noções básicas de Vue: Parabéns por chegar ao final desta seção. Esperemos que você já pode ver como divertido e fácil é começar com vista JS. Você já aprendeu muitos conceitos novos, como como configurar a instância de exibição, vinculação de dados bidirecional, manipulação de eventos, manipulação listas e muito mais. Na próxima seção, vamos melhorar um pouco as coisas cobrindo tópicos de visualização ainda mais essenciais, além de completar nossa inscrição na lista de convidados. 20. Introdução da seção: um olhar mais aprofundado no Vue: Bem-vindo a esta nova seção. Vamos começar a dar uma olhada mais profunda no que Vue.js tem para oferecer. Continuaremos a criar nossa lista de convidados adicionando novos recursos e aprendendo mais sobre Vue.js, como propriedades computadas, relógios e filtros. No final desta seção, você terá uma boa compreensão de muitos dos elementos essenciais do Vue.js e como tudo se encaixa depois de concluir seu primeiro projeto. Vamos começar imediatamente com uma nota melhorada adicionando uma barra de progresso. 21. Adicionando uma barra de progresso: Neste vídeo, vamos adicionar uma barra de progresso à nossa aplicação. Também vamos restringir o número de nomes que podemos adicionar aos nossos eventos na lista de convidados. Essa barra de progresso aumentará como uma porcentagem à medida que a matriz de nomes do convidado for preenchida. Isso nos dará uma chance de obter mais prática adicionando dados reativos ao nosso aplicativo, e também vincular em atributos de estilo que abordamos na última seção. Vamos começar removendo a cor verde, quando o formulário é enviado, pois agora teremos uma indicação visual com a barra de progresso. No index.html, vamos remover as classes de vinculação que foram adicionadas na última seção. Selecione remover FormSubmitClass de todos os locais. Além disso, vamos remover isso do objeto de dados em app.js. Vamos passar por cima e remover isso do objeto de dados. Em seguida, mais abaixo, vamos remover a referência FormSubmitClass do nosso método. Então, finalmente, não precisamos dos estilos enviados em app.css, você também pode removê-los também. Agora que está resolvido, podemos voltar para a página Índice e podemos começar a adicionar nossa barra de progresso. Vou adicionar isto perto da parte inferior da página. Se procurarmos o texto de atendimento, que exibe quantos nomes estão na lista. Logo abaixo disso, vou adicionar uma tag break e, em seguida, adicionar uma barra de progresso HTML5. O que vem a ser uma barra de progresso, por enquanto. Podemos salvar e apenas verificar que está aparecendo na tela. Ótimo, queremos que essa barra de progresso aumente cada vez que um nome é adicionado à lista de convidados. Para fazer isso, precisamos calcular uma porcentagem. No app.js vou adicionar duas novas propriedades de dados aos objetos de dados. O primeiro será a capacidade do evento para que você possa definir quantos nomes deseja como máximo. Eu vou dizer, a capacidade do evento para inicialmente ser 25. Então, logo abaixo disso, eu também vou definir o EventCapacityPercentual. Isto só vai ser definido como zero inicialmente. Usamos isso para descobrir o quão completo é o evento como uma porcentagem. Vamos calcular isso dentro do método de formulário enviado. Se nós rolar para baixo para este método e, em seguida, logo abaixo this.NEWNAMEText. Vamos definir this.EventCapacityPercentual, e vamos calcular a porcentagem aqui. Isso vai ser igual a this.guestName.length. O número de nomes na lista de convidados dividido por this.EventCapacity, vamos dividir isso por 100 para transformá-lo em uma porcentagem. Agora temos a porcentagem como um valor entre zero e 100. Podemos tomar o nosso conhecimento de estilos de ligação da última seção e usá-lo definir a largura da barra de progresso. Vamos voltar para a barra de progresso e, em seguida, adicionar um atributo de estilo. Novamente, sabemos que precisamos usar os dois pontos porque estes são dados dinâmicos. Vamos começar os estilos dentro das chaves como um objeto. O único estilo que precisamos adicionar é a largura. A largura será definida como EventCapacityPercentual que acabamos de criar antes. É claro que isso aumentará à medida que a capacidade muda. Então, no final, vamos adicionar uma string, que é apenas o símbolo de porcentagem. Tudo o que estamos fazendo aqui é definir a propriedade CSS width, tornando o valor percentual reativo em vez de apenas codificação manual em um número definido. Vamos salvar isso e com isso no lugar, vamos até o navegador e testar seu trabalho. Podemos adicionar alguns nomes e muitas vezes a barra de progresso aumenta com cada um. Ótima. Começa a aumentar, por isso parece estar tudo a funcionar bem. No momento, temos o texto que mostra quantas pessoas estão vindo para os eventos. Eu quero agora também acrescenta a capacidade para que possamos ver quantas pessoas também estão autorizados a participar. Nós já temos todos os dados necessários para completar isso, volta na página Índice ao lado do texto assistente. Nós já temos o guestName.length sendo emitido. Depois disso, eu vou adicionar uma barra e, em seguida, simplesmente saída EventCapacity. Agora, quando vamos para o aplicativo, devemos ver um de 25 e dois de 25, e isso está aumentando cada vez que adicionamos um novo nome. Isso está funcionando e também a barra de progresso parece funcionar no final. Mas há um problema. Ainda podemos rever o número total de nomes que definimos, podemos passar mais de 25. Isso faz com que uma barra de progresso saia da tela e também o número na seção de atendimento para continuar passando por cima do máximo permitido. Basta adicionar muito mais nomes e chegar ao máximo. Podemos ver que podemos claramente passar por cima disso. Isso pode ser facilmente corrigido adicionando outra combinação para testar dentro de nosso método de formulário enviado. Voltar no app.js. Sabemos que já temos uma verificação de instrução [inaudível] se houver um nome inserido. Também podemos adicionar uma segunda verificação para determinar se o EventCapacityPercentual é inferior a 100 por cento. Se ele não quiser continuar a adicionar nomes. Depois this.NEWNAMEText.Length é maior que zero, this.EventCapacityPercentual é menor que 100. Se a capacidade for inferior a 100 por cento, ainda podemos continuar a adicionar nomes à matriz. Se a porcentagem for superior a 100 ou igual a 100, então nenhum novo nome será enviado para a matriz. Vamos dar uma chance se voltarmos para o aplicativo e depois atualizar, ainda podemos adicionar nomes à lista de convidados, sem problema. Assim que chegarmos a 25, devemos ver que nenhum novo nome pode ser adicionado. Lá vamos nós, agora atingimos a capacidade e nenhum novo nome está sendo aceito no array. Agora vamos passar para dar uma olhada em como podemos lidar com lógica mais complexa usando propriedades computadas. 22. Propriedades calculadas: Longe neste curso, dentro da poucas instâncias, analisamos como podemos trabalhar com dados, usando objetos de dados. Também analisamos como podemos adicionar um objeto de mensagem, que você pode usar para adicionar funcionalidade ao nosso aplicativo. Agora eu quero mostrar-lhe uma terceira propriedade que não podemos todos ver instância chamada propriedades computadas. Nós mencionamos no último vídeo que em muitas expressões JavaScript dentro do nosso modelo, pode tornar o código menos reutilizável e mais difícil de manter. Nós também limitamos o uso de uma expressão JavaScript. Este é o lugar onde as propriedades computadas entram. Nós adicioná-los à nossa instância view, assim como os dados e métodos objetos para adicionar lógica mais complexa. Há também outra grande diferença que veremos em breve. Vamos adicionar nossa seção computada, seguida dos dois pontos, e isso também é um objeto. Podemos adicionar nossas propriedades dentro do objeto computado, assim como fizemos dentro do objeto métodos. Vou usar uma propriedade computada para classificar os nomes dos casos, em nossa matriz e, em seguida, retorná-los em ordem alfabética. Ele precisa digitar o nome. Neste caso eu vou chamar este tipo de nomes, e esta é uma função. Então, dentro do corpo, vamos retornar alguns dados, e os dados que queremos retornar é este ponto nome caso dot sort. Usando salt é método normal de matriz JavaScript, assim como quando usamos o método push em formulários enviados acima. Para que isso funcione, precisamos mudar uma coisa dentro do nosso HTML de ponto de índice. Agora precisamos olhar através dos nomes de classificação em vez do nome do convidado. Vá até a página de índice, e mude o nome do caso para ser nossa propriedade de computador de nomes de classificação. Então vamos dar uma olhada nisso dentro do navegador e agora devemos vê-los ordenados em ordem alfabética. Usamos uma propriedade computada quando o nosso código dentro depende da propriedade interval, ou qualquer um dos dados de nossa instância view, poucos JS assiste conteúdo e está ciente do código do computador e qualquer uma de suas dependências. Neste exemplo, usamos os dados do nome do convidado, que significa que estará ciente de que ele está lá. Ele armazenará os dados em cache ou a única rerenderização quando a dependência do nome do convidado for alterada. Este é o lugar onde a diferença reside entre propriedades computadas e métodos. Métodos, por outro lado, sempre re renderizar quando qualquer coisa muda, mesmo que não haja nenhuma alteração para os dados que ele exibe. Vamos dar uma olhada nisso em ação fazendo login no console. primeiro nome são o log do console para o método de formulário enviado e simplesmente o log de console do texto do método. Na nova propriedade computada que acabamos de criar. Queremos registrar para o console os textos de computados. Se formos para o navegador e, em seguida, clique com o botão direito do mouse e abrir o console. Se, em seguida, adicionar um nome à nossa lista de convidados e bater enviar, podemos ver que ambos o método não computado acima registrado para o console. Isso é esperado porque adicionamos à matriz de nome de convidado dentro da propriedade computer. Está observando a propriedade do nome do hóspede como uma dependência. Então view está ciente de que as alterações ocorreram e, em seguida, re-renderiza um conteúdo. Temos o log método porque, como mencionamos antes, métodos sempre re renderizar, quando qualquer coisa muda, mesmo que os dados dentro não mudou. Vamos ver esse comportamento em ação adicionando um novo método. Vou até a página de índice e adicionar um botão. Basta soprar o osso de entrada, no botão HTML normal com o texto ou chamar um método. Em seguida, podemos adicionar um ouvinte clique usando a mão curta. Então, no clique, vou definir isso para uma chamada de método. Agora podemos ir e criar esta chamada de método dentro do app.js Certifique-se que isso está abaixo do método formulário enviado e separado com uma vírgula. Nós configuramos essa chamada de método, pouco antes de toda essa função, e, em seguida, dentro do corpo, vamos definir os estilos. Tudo o que vamos fazer é configurar este estilo e, em seguida, mudar a margem superior para 50 pixels. Este é um método que não tem nada a ver com os dados do nome do hóspede. Vamos ver o que acontece quando chamamos esse novo método. Vamos voltar para o aplicativo, digite um novo nome no campo de entrada e clique em enviar. Vemos ambos os métodos e computados primeiro, que é um comportamento que já vimos antes, isso é o que esperamos. No entanto, quando chamamos o novo método pressionando o novo botão, vemos apenas o método registrado, isso ocorre porque nossa nova chamada método só afeta a propriedade de dados top margem e tem uma propriedade computada é apenas observando alterações na propriedade do nome do hóspede. Isso significa que, computado não será registrado porque nenhuma alteração foi feita. No entanto, ainda temos uma chamada de método porque todos os métodos são sempre re-renderizados, mesmo que os dados dentro deles não tenham sido alterados. Isso significa que a menos que você tenha uma razão específica para re-renderizar método cada vez, então as propriedades calculadas serão uma maneira mais eficiente de fazer as coisas. Para muitos casos. Usando uma propriedade computada, método automático irá alcançar os mesmos results.Apenas ter em mente esta diferença no comportamento nos bastidores. Antes de encerrarmos este vídeo há alguns pontos-chave que quero mostrar-vos. Primeiro de tudo, vamos adicionar um teste aos nossos objetos de métodos, para simplesmente fazer um log de console. Vamos voltar dos métodos e cria o nosso método de teste, satisfazendo da mesma forma que uma função que faz um log de console e simplesmente emite o console, os textos do texto do método. Mais na página de índice, eu vou ir abaixo do botão que é criado e chamar este método dentro de nossas chaves duplas. No nome do método de teste, salve isso e vamos para o navegador. Podemos ver que teremos um erro. Isso ocorre porque ao chamar um método dentro das chaves triplas como uma expressão JavaScript, precisamos chamá-lo usar o parêntese. Assim como os parênteses logo após o texto. Vamos economizar e dar uma olhada nisso e podemos ver em nossos trabalhos. No entanto, quando colonos como uma propriedade computada, o parêntese não é usado. A ação da série, podemos mover o nosso método depois de JS e configurar uma propriedade computada no lugar. Vamos colocar isso e, em seguida, colá-lo abaixo como uma propriedade computada e, em seguida, salvar isso. Se removermos os parênteses sobre na página de índice e, em seguida, dizer se podemos passar para o navegador e podemos ver que isso agora funciona, agora vai obter o log do console para. Uma desvantagem ao usar propriedades computadas é que, não somos capazes de executar tarefas assíncronas. No entanto, podemos fazer isso usando uma opção de relógio, que é fornecida pelo VGS. Esta é também uma alternativa propriedades computadas, e vamos dar uma olhada nisso no próximo vídeo. 23. Observadores: No último vídeo, analisamos o uso de propriedades computadas, que são uma ótima maneira de adicionar funcionalidade ao nosso aplicativo. Propriedades computadas observam o código e só reagem se qualquer um dos dados for alterado. Como alternativa Vue.js também nos fornece uma propriedade de relógio, que podemos usar quando queremos assistir a uma propriedade de dados e reagir a quaisquer alterações. Usando Watch também nos permite executar tarefas assíncronas que não são capazes de usar com propriedades computadas. Nós configuramos os objetos watch na instância do vue, assim como fizemos com métodos computados e dados. Para começar, vou começar excluindo os exemplos do último vídeo. Então, em app.js, podemos excluir o método de teste. Também podemos remover chamada de método. Então remova esses dois e, em seguida, de volta em index.html, também podemos remover o botão Exemplo que adicionamos também. Uma vez feito isso, vamos voltar para o app.js e que configurar o nosso objeto Watch. Isso é claro é adicionado assim como os outros objetos que nós olhamos. Então adicione uma vírgula logo após a seção computada e, em seguida, adicione nosso objeto watch. Dentro do objeto watch, podemos definir uma propriedade de dados que você deseja observar. Esse nome deve corresponder a um nome de dados existente. Então, por exemplo, precisamos usar GuestName ou algo como EventDate, que já temos dentro de nossa propriedade de dados. Vou vigiar a nossa propriedade GuestName. Em seguida, especificamos uma função que queremos executar quando há uma alteração para GuestName. Após a mudança Vue.js passará o valor desta alteração para a função.Dentro dos parênteses de função, podemos passar em um nome que queremos dar aos dados vue passará em. Este nome pode ser qualquer coisa que quiser, mas eu vou chamá-lo de dados, e então dentro da função, eu vou registrar no console uma mensagem quando GuestName, que está sendo observado pelo observador, é alterado. Em seguida, vamos adicionar o log do console do relógio acionado. Em seguida, vamos abrir o console no navegador e, em seguida, adicionar alguns nomes à lista de convidados. Então, uma coisa que você vai notar é que o relógio acionado é impresso duas vezes por nome adicionado. Isso ocorre porque estamos observando a propriedade data de GuestName. GuestName é alterado duas vezes. Ele é alterado uma vez dentro do método de formulário enviado, e, em seguida, mais uma vez dentro da propriedade computada, para classificar os nomes em ordem alfabética. Assim, podemos ver que esses dados estão sendo observados e a função é executada em cada change.Claro, este é um exemplo básico, mas dá-lhe uma idéia de como eles podem ser usados. Usaremos mais tarde à medida que passarmos pelos projetos do curso. Por razões de desempenho, geralmente é melhor usar uma propriedade computada sempre que possível devido a essa renderização eficiente devido ao cache. Mas os observadores, como discutimos, são úteis para observar alterações nas propriedades de dados e também úteis para tarefas assíncronas, como acessar dados de API. 24. Eventos chave e modificadores: No início do curso, olhamos para manipuladores de eventos, usando o V na Diretiva, então mudamos V para uma sintaxe mais curta usando o símbolo @. Isso acionou o método de formulário enviado, quando o evento de envio foi detectado. Também mencionamos que não estamos limitados a usar apenas enviar. Nós também temos acesso a toda a gama de eventos HTML, como clique, on-change e on-mode para citar alguns. Um longo caminho para desencadear eventos, também podemos usar o V na Directiva, o símbolo abreviado @ para fazer algo quando uma tecla de teclado é pressionada. Dentro de nossas entradas, eu vou adicionar um evento de teclado para nossa entrada de nome. Podemos usar eventos de teclado padrão, como tecla para baixo. Neste exemplo, vou usar key-up, seguido pelo código de tecla que queremos observar. Uma vez que o número de chave 32, que é a barra de espaço, é liberado, acionamos um método chamado tecla pressionada. Ainda não configuramos o método pressionado pela tecla, então vamos fazer isso agora. Vá para o Up.js e, em seguida, vamos adicionar um novo método. Este método, é claro, é chamado de tecla pressionada. Tudo o que ele quer fazer é adicionar um log do console, e dentro deste log do console, nós apenas ir para imprimir o texto da tecla pressionada. Isso simplesmente fará login na tecla do console pressionada uma vez que a tecla de espaço está sendo liberada. Então vamos salvar isso e abrir isso dentro do console. Se pressionarmos a barra de espaço dentro do campo de entrada de nome, podemos ver nossos principais eventos foram detectados. Então, para este exemplo, usamos o número de chave 32, que é a barra de espaço. Podemos Google códigos de chave JavaScript para uma lista completa de números para todas as chaves, se quisermos. No entanto, Vue.js também nos fornece alguns aliases para chaves comuns. Podemos substituir a chave número 32 com a palavra espaço, e depois tentar se atualizarmos. Isso funciona da mesma forma, mas é mais legível e mais fácil de lembrar. Vue.js também nos permite usar enter, tab, delete, escape, up-down, e também esquerda e direitos no lugar de qualquer um dos códigos de chave. Vamos tentar mais uma. Podemos mudar o espaço para a tecla de escape, então diga isso e pressione a tecla de escape, e ela funciona como antes. É assim que podemos usar chaves para acionar eventos, e como podemos usar modificadores de chave, ou aliases em nossos projetos do Vue. 25. Filtros: Vue JS também nos fornece uma propriedade chamada filters, que também podemos adicionar à nossa instância view. Os filtros são projetados para aplicar formatação ou transformação de texto comum, como alterar strings para maiúsculas ou minúsculas. Eles não se destinam a ser usados para tarefas complexas. Se você tem algo mais complexo, então é ruim usar uma propriedade computada em vez disso. A adição de filtros é muito simples. Podemos adicioná-los mesmo quando usando v-bind, que olhamos anteriormente, ou usando a sintaxe de chave dupla. Para ver isso em ação, vou passar para o nosso loop for no index.html. Então, dentro das chaves duplas terá nome. Mantemos no lugar a expressão de nome e, em seguida, adicionar nosso nome de filtro depois, separado por um símbolo de pipe. Se adicionarmos um filtro usando v-bind, podemos fazer exatamente o mesmo. Nós simplesmente adicionamos a expressão JavaScript primeiro, depois o nome do filtro separado pelo pipe. Em seguida, em nossa instância view, nós adicionamos nossa propriedade filters. Este é, naturalmente, onde adicionamos todos os nossos filtros. Vamos adicionar nossos dois filtros superiores que acabamos de adicionar. A sintaxe é exatamente a mesma que os observadores que olhamos antes. Esta é uma função que leva no valor dos dados passados para ele. Para o nosso exemplo, será o valor do nome. Assim como quando olhamos para usar observadores, podemos nomear este valor qualquer coisa que quisermos. Em seguida, retornaremos o valor transformado em maiúsculas. Veja nossa maiúscula. É apenas JavaScript simples e não é fornecido a nós pelo Vue JS. vez, este é um bom exemplo de como podemos fazer os dados do Vue JS com JavaScript simples. Vamos salvar isso e testar no navegador. Vá para o campo de entrada, e se digitarmos um nome dentro de lá com minúsculas e, em seguida, pressione “Enter”, podemos ver que o nome é agora transformado em maiúsculas. Também podemos usar vários filtros e encadeá-los juntos. Tudo o que precisamos fazer é voltar para as chaves duplas onde adicionamos o primeiro filtro. Novamente, você o separa por um tubo que adicionamos o nome do nosso segundo filtro, que queremos aplicar. Isso funciona da esquerda para a direita. Nesse caso, “nome” será passado para o filtro “ToupPer”. Em seguida, o valor do filtro ToUpPer será passado para “FormatName”. Então a ordem é importante. Podemos ver esta ordem em ação se adicionarmos o filtro “FormatName” no app.js. Logo abaixo do filtro “ToupPer” separado por uma vírgula. Podemos adicionar um “FormatName”. Novamente, esta função leva no valor que é passado para ele a partir de “ToUpPer”. Em seguida, se nós simplesmente console log o valor passado para ele, em seguida, ir para o navegador e abrir o console. Podemos ver que o valor está em letras maiúsculas. Isso mostra que estamos recebendo o valor do nome depois que ele passou pelo primeiro filtro. Este é apenas um exemplo, para que possamos remover os dois filtros superiores e também removê-lo da nossa página de índice. Agora podemos adicionar alguma formatação ao nosso nome e, em seguida, voltar para o nosso filtro e remover o log do console. O formato em que vamos aplicar vai tomar o nome que o usuário digita, vai cortar a primeira letra e, em seguida, transformá-los em maiúsculas. Todos os caracteres restantes depois se transformarão em minúsculas. Para fazer isso, vamos retornar o “valor.fatia”. Vamos cortar nossa posição zero, que é a primeira letra. Nós só queremos a fatia desta primeira letra, então isso só vai ser para uma posição. Esta primeira letra, depois vamos transformar-nos em maiúsculas. Então vamos adicionar ao final desta letra maiúscula, novamente, o “value.slice”. Este vai ser o resto dos personagens a partir da posição um em diante. Todo o resto é que os caracteres vão ser definidos para minúsculas. Vamos adicionar isso no final e depois salvar isso. Agora, se eu for para o navegador. Vamos adicionar um nome com uma mistura de maiúsculas e minúsculas e, em seguida, pressione “Enter”, e podemos ver o nome está corretamente formatado agora. Claro, formatação mais complexa, como se o usuário adiciona um nome com um sobrenome ou até mesmo nomes livres, precisamos fazer um pouco mais de trabalho para contornar isso. Este pode ser um bom caso para mudar para um valor calculado em vez do filtro. Tanto para formatação de texto simples, usar filtros é uma maneira ideal de fazer isso. 26. Mais sobre loops: chaves e números de índice: Neste vídeo, vamos dar uma olhada um pouco mais profunda no uso de loops anteriores. Vamos mostrar-lhe como adicionar chaves e também como adicionar números de índice a cada item. Às vezes, quando nós percorremos um array, assim como quando nós percorremos todos os nomes de nossos convidados e exibi-los para a tela, nós podemos ter a necessidade de pegar o número de índice para cada item dentro da matriz. O número do índice é a posição de cada item. Por exemplo, o primeiro nome adicionado é a posição zero porque as matrizes sempre começam na posição zero. O segundo nome adicionado estará na posição um, e assim por diante. Temos acesso a este número de índice em VUGS ao usar um loop v-for. Tudo o que precisamos fazer é adicionar um segundo argumento ao loop v-for como este. Certifique-se de que você está no index.html. Se descermos até o fundo, temos o loop v-for para percorrer os nomes dos convidados. Dentro deste loop V-for, podemos adicionar o nosso segundo argumento. Precisamos batê-los dentro dos suportes. O primeiro argumento ainda é o nome que damos a cada valor dentro do loop. Então o segundo é um nome que queremos dar ao número do índice. Ambos os nomes são totalmente com a gente. Podemos escolher o que quisermos, mas é melhor mantê-los mais descritivos, se possível. Agora o nome para o índice está definido. Podemos adicionar isso usando as chaves duplas. Logo após o nosso nome formativo, vamos produzir dentro dos colchetes o valor do nosso índice. Agora, se salvarmos e passar para o navegador, podemos ver a posição de índice de cada nome. Aprendemos cedo que também podemos adicionar JavaScript dentro desta sintaxe de chave dupla. Vamos aproveitar isso voltando ao índice e adicionando mais um ao número do índice. Isso significa que nosso índice agora começa na posição um em vez de zero. Nós adicionamos índice mais um, e salvamos isso. Agora, se voltarmos ao nosso aplicativo e adicionar alguns nomes, agora temos o número de índice correspondente ao número de convidados. Em seguida, quero dar uma olhada em adicionar chaves aos nossos loops. Também podemos permitir a visualização para melhor rastrear nossos valores de matriz, fornecendo uma chave única para cada um dos itens. Recomenda-se usar uma chave única com v-for sempre que possível. A exibição de comportamento padrão usa ao atualizar uma lista de elementos, como uma matriz, é o patch e o elemento em vigor em um número de índice específico. Se [inaudível] adicionar um array, ele corrige este item extra no lugar na posição de índice designada, em vez mover elementos [inaudíveis] para a ordem correta. Isso torna uma maneira eficiente de fazer as coisas, mas podemos ir melhor. Podemos ter certeza de que cada item na matriz tem um identificador exclusivo, que podemos fazer referência se precisarmos fazer uma alteração. View pode então rastrear cada item e pode mover coisas ao atualizar, e até mesmo reutilizar itens quando necessário. Em qualquer chave exclusiva significa que a visualização agora está ciente dos itens, em vez de apenas saber qual posição de índice ela precisa para corrigir um novo valor. Isso faz com que um comportamento mais seguro e previsível ao alterar valores em um array. Podemos adicionar chave indo para o nosso for-loop. Usamos dois pontos para vinculação dinâmica, e o nome que damos a essa chave também é importante. Ele deve se vincular a alguns dados reativos existentes. Se tentarmos adicionar um nome aleatório que não é declarado na instância vista, teremos um erro. Vamos apenas digitar um nome aleatório e, em seguida, salvar isso. Em seguida, se formos para o aplicativo e adicionar um nome à lista de convidados, abrir o console, veremos um erro. Podemos usar dados existentes, como o nome do hóspede. Vamos digitar um nome dentro da chave. Agora, se guardarmos isso e passarmos para o navegador. Se apertarmos atualizar, agora podemos ver que a mensagem de erro está sendo removida. Agora vista reconhece esse nome como uma propriedade de data. Agora isso pode não ser o ideal porque podemos ter mais de uma pessoa com o mesmo nome. Poderíamos configurar um objeto para manter um ID exclusivo com cada nome de convidado. Abra também nova propriedade date para manter um valor exclusivo e, em seguida, usá-lo como uma chave. Por enquanto, eu vou sair e voltar a isso em alguns vídeos. A principal coisa a entender é que, ao criar um for-loop, é realmente a melhor prática adicionar uma chave a uma lista de valores sempre que possível. 27. Usando várias instâncias do Vue: No nosso aplicativo de lista de convidados, atualmente, usamos apenas uma instância do Vue js para controlar todo o nosso aplicativo. Isto é bom e pequeno como este. Mas em aplicativos grandes, podemos achar mais conveniente dividir determinadas funcionalidades ou determinados dados em várias instâncias. Usar várias instâncias é perfeitamente bom para fazer, pode até fazer sentido em alguns casos, onde queremos que o código seja contido em seções. Fazemos isso como antes. Criamos uma nova instância do Vue e também uma nova seção HTML, como a div para vincular aos nossos dados. Vamos começar com isso agora. Se passarmos para o index.html, temos atualmente a primeira instância vista ligada a esta div com o id do aplicativo. A primeira coisa que eu quero fazer é cortar o div recipiente de abertura e, em seguida, mover isso para o topo. Isto é para que ele contém o nosso conteúdo existente e também a nova div de navegação, que agora eu vou adicionar. Vamos criar uma nova div com um id de navegação. Este id será vinculado à nossa instância do Vue usando a propriedade el e criaremos isso em breve. Então eu vou cortar a primeira linha do nosso aplicativo e, em seguida, colar isso dentro da seção de navegação que acabamos de criar. Agora, nós temos esta nova seção de navegação. Vou passar para app.js e podemos criar uma nova instância do Vue logo abaixo da última. Se você for para a parte inferior, agora podemos digitar “New View” e, em seguida, novamente, basta digitar o objeto dentro dos parênteses. A primeira propriedade novamente, precisamos adicionar é el. Este é um ID de navegação. Vamos adicionar isso no topo. Em seguida, podemos adicionar nossos objetos de dados. Vamos adicionar alguns dados reativos aqui, como o nome do aplicativo. Vou definir o nome do aplicativo para ser igual à lista de convidados, que é o que temos atualmente. Em seguida, se voltarmos para a nossa div de navegação, podemos então usar um chaves duplas para substituir o texto da lista de convidados pelo nome do nosso aplicativo. Salve isso e se testarmos isso no navegador, não veremos nenhuma diferença. O que significa que está tudo funcionando bem. Há uma desvantagem em fazer isso, no entanto, os dados contidos em cada instância do Vue são separados uns dos outros. Isso significa que só podemos usar essa palavra-chave para acessar dados dentro da instância view em que é usado. Se voltar para a primeira instância do Vue e, em seguida, adicionar um log do console. Eu vou adicionar isso dentro do método de formulário enviado e eu quero registrar este nome. app. Lembre-se que o nome do aplicativo é uma propriedade de dados da nossa segunda instância. Vamos salvar isso e ver o que acontece. Se formos até o navegador, abrimos o console e clicarmos no botão “Formulário Enviar”, recebemos uma mensagem de aviso vermelha dizendo que a propriedade dos estilos do aplicativo não está definida. Isso é por causa do mesmo problema. O objeto de estilos de aplicativo é uma propriedade de dados dentro da primeira instância. Aqui, nós também tentando acessar isso dentro do index.html dentro do controle de seção pela segunda instância de navegação. Sabemos agora como vincular estilos. Vamos mover de volta os estilos para a folha de estilo para que possa acessar um em todos os lugares. Podemos ir até a instância do Vue e excluir o objeto estilos de aplicativo. Agora, estes estão apagados. Podemos voltar para o app.css e, em seguida, re-introduziu a margem superior de 25 pixels. Essa margem é adicionada a todas as linhas, então use a linha como o seletor e, em seguida, adicione a margem superior de 25 pixels e salve isso. Em seguida, se voltarmos para a página index.html, podemos excluir a propriedade estilo de estilos de aplicativo em todos os locais. Esse é o primeiro e depois o segundo. Então, finalmente, vamos remover o terceiro e último. Em seguida, também podemos remover o log do console do método. Vamos voltar para o app.js e para baixo para o método de formulários enviados e, em seguida, remover isso. Agora, se salvarmos isso e voltarmos para o navegador e atualizar, veremos que tudo está funcionando bem novamente. Dividir seções em várias instâncias do Vue é perfeitamente bom para fazer e também é prático se o código contido em cada instância não está relacionado ou não há razão para exigir dados de outras instâncias. Há resíduos acessam dados de mais de instâncias com outros métodos. Mas vamos abordar isso mais tarde nesta seção. Continuaremos a seguir adicionando alguns links de navegação à nossa nova instância e também usando esses links para ver como podemos percorrer objetos. 28. Usando loops em objetos: Nós já cobrimos looping através de arrays durante este projeto. Neste vídeo, eu quero continuar com a nossa nova instância vue, adicionando um novo array objetos de links de navegação, que também podemos percorrer. Os valores neste objeto também contém AID. Assim, você também pode usar isso para adicionar uma chave exclusiva. Então, a visualização pode acompanhar os itens listados dentro do nosso app.js. Vamos começar a criar nossa matriz de objetos, em direção aos nossos links de navegação. Abaixo do nome do aplicativo. Vou começar com o nome de NavLinks. Isto vai ser um array. Cada item de matriz é um objeto que tem um par de valor de chave de nome e ID. Vamos abrir as chaves para o primeiro link. Vou definir o nome como a chave, e casa como o valor. Separe por uma vírgula. Nós também vamos adicionar um ID. Então eu vou mantê-lo simples e começar com ID de um, e depois separá-lo por uma vírgula, podemos começar nosso segundo link. Então eu vou copiar e colar o primeiro item. Altere o nome para eventos futuros e, em seguida, altere também o ID para o número 2. Então, mais uma vez, cole o mesmo, e vamos chamar este de benefícios de hóspedes. Dê-nos uma identificação de três, e, em seguida, o link final, vamos adicionar as últimas notícias, e então fazer com que seja ID número 4. Então vamos também para a nossa página web index.html, e olhar para como podemos percorrer esta matriz de objetos. Vou criar uma nova div para isso, logo abaixo da tag div de fechamento para o nome do aplicativo. Crie a div circundante e, em seguida, dentro daqui eu vou criar uma lista desordenada, para exibir todos os links da navegação. Então, dentro disso, queremos adicionar uma tag de modelo HTML. Esta tag de modelo pode ser usada com V4 e também VF2. Para renderizar um bloco de vários elementos. Template é apenas um recipiente, assim como uma div comum. Mas este elemento de modelo não será renderizado para o DOM. Então nós tínhamos dentro deste modelo podemos criar o loop V4. Então eu vou chamar este NavLink em NavLinks. Claro, NavLinks é o nome da propriedade date que criamos. Então não alinhamos itens, vamos criar nossos itens de lista. Usamos isso com as chaves duplas. O primeiro vai ser NavLink.Name. Vou criar mais um item da lista abaixo, que será navlink.id. Isso irá selecionar o nome e id para cada objeto individual. Então agora temos o conteúdo dentro do modelo. Se formos até as ferramentas div, podemos selecionar a div que criamos. Selecionamos a lista não ordenada. Podemos ver que as tags ul está lá, e, em seguida, é seguido pelo conteúdo dentro das tags template. Então, na verdade, não vemos o elemento de modelo renderizado para a tela. Mas vemos na tela o nome e também o id para cada objeto dentro de nossa matriz. Também podemos exibir os pares de valor de chave de cada ferramenta objeto. Chave no nome e também no id do objeto. Sendo o valor após a chave, como casa e um. Podemos simplificar o que já temos em um item de lista. Então, se excluirmos o segundo item da lista, e então podemos adicionar um segundo loop V4. Este vai ser um valor em NavLink. O valor do nome é opcional. Isso pode ser o que quisermos, mas o nome NavLink também é opcional, mas ele deve corresponder ao nome dentro do loop externo. Também adicionaremos uma regra horizontal, para que possamos separar cada item da lista. Agora, se adicionarmos valor nas chaves duplas, você pode ver essa saída para a tela. Então vá até o navegador, e ele imprime as chaves e os valores dos objetos como um par. Também podemos separá-los para trabalhar com eles de forma independente. Se cercarmos valor dentro dos colchetes. Também podemos adicionar uma chave, que significa que temos tanto a chave quanto o valor disponível para usar de forma independente. Então, após o valor, adicione uma vírgula e, em seguida, chave. Agora, em vez de apenas produzir o valor, também irá produzir a chave separada com o pipe e, em seguida, voltar para o navegador. Podemos ver isso em ação. Temos a chave e o valor impressos para cada objeto. Nós também pode adicionar um terceiro argumento é chave e valor. Lembre-se que adicionamos um número de índice ao loop V4 para imprimir os nomes em nossa lista de convidados. Bem, nós também podemos fazer o mesmo aqui com os terceiros argumentos. Vou chamá-lo de índice de novo, porque faz sentido dar um nome a isto. Então, separados por vírgula adicionar índice como o terceiro argumento. Então, como um terceiro argumento dentro das chaves duplas, nós também vamos imprimir o índice. Então salve e, em seguida, vá para o nosso projeto e, em seguida, atualizar. Agora também podemos ver o índice impresso ao lado de cada item. Agora sabemos como percorrer objetos. Vamos colocar sua técnica em prática no próximo vídeo. Por nossos links de navegação, como queremos que eles olhem dentro do nosso aplicativo. 29. Adicionando nossos links e chaves de navegação: Agora sabemos como trabalhar com looping através de objetos, vamos estruturar isso para que seja mais adequado para nossa aplicação. Também adicionaremos uma chave exclusiva a cada item e garantiremos que cada item de navegação tenha um URL para vincular. Para começar, vou remover o item da lista completa do último vídeo. Em seguida, substitua isso por um item de lista padrão, que emite o nome do ponto NavLink. Isso irá simplesmente mostrar os nomes de nossos links, e como esta é uma barra de navegação, nós também queremos fazer esses links. Vamos em frente e cercar o link de navegação com uma etiqueta. Adicione-os dentro dos itens da lista. Na etiqueta a com o href, e deixe isso vazio por enquanto e feche a etiqueta a. Agora vamos adicionar alguns links para o nosso objeto para vincular, de volta nos links nav no App dot js. Após o ID mais você deseja adicionar um URL para o link. Isso vai ser apenas um link fictício apenas para testar seu trabalho, após a vírgula vamos adicionar o URL e adicionar um link, eu só vou usar o Google para este exemplo. Digite H-T-T-P-S dois pontos barra para frente, barra para frente e, em seguida, www dot google dot com. Então podemos copiar isso e colar isso, nos quatro links. Vou definir o segundo para ir para Amazon dot com, o terceiro para ir para o eBay, e então o quarto formulário que vamos adicionar como Facebook. Agora temos um URL para adicionar ao nosso tags em HTML. Lembre-se da última seção que dissemos que não podemos usar as chaves duplas para adicionar dados reativos para atributos HTML como este. Ele poderia adicionar as chaves duplas e, em seguida, adicionar o URL do ponto navlink. Para isso funcionar, precisamos usar a diretiva de vinculação V para adicionar à nossa URL, ou eu vou usar a técnica abreviada de apenas os dois pontos. Também precisamos remover as chaves duplas para que isso funcione dentro de um atributo. Vamos salvar isso, e se formos para nossos links de navegação no navegador, podemos clicar nos links e testar o trabalho. Todos parecem estar funcionando bem. Vamos tentar mais um. Ótimo. Agora os links funcionam como queremos. É hora de adicionar um pouco de estilo aos links. Desde já temos Bootstrap ligado ao nosso projeto. Podemos adicionar algumas classes Bootstrap à nossa navegação. Primeiro de tudo, se abrirmos a tag URL, podemos adicionar uma classe Bootstrap de nav e, em seguida, nos itens da lista, também podemos adicionar um cluster também. Novamente, esta é uma classe Bootstrap de nav hífen item. Em seguida, dentro dos links irá adicionar uma classe de NavLink, e, em seguida, se você quiser adicionar algumas linhas horizontais no lugar apenas para quebrar o nosso aplicativo. O primeiro que eu vou adicionar logo abaixo do nível um cabeçalho do nome do nosso aplicativo, então adicione hr lá dentro. O segundo é um pouco antes da div de fechamento com o ID de navegação e isso irá adicionar uma linha acima e também abaixo de nossos links de navegação. A última coisa que quero fazer à nossa navegação é adicionar uma chave exclusiva a cada item da lista. Nós tocamos nisso alguns vídeos atrás. Mas desta vez agora temos acesso a um ID dentro de nosso objeto links nav. Isso faz para uma chave ideal porque temos cada valor definido para ser único. Agora vamos voltar ao nosso HTML. Agora vamos adicionar esta chave dentro do elemento modelo logo após o loop for. Vincule a chave e defina isso igual a NavLink dot ID. Em teoria, eles devem funcionar. Mas, no entanto, haverá um pequeno problema, que veremos se passamos para as ferramentas do desenvolvedor. Clique com o botão direito e inspecione Vemos o modelo de aviso vermelho dizendo não pode ser chaveado. Coloca a chave em elementos reais em vez disso. Recebemos o aviso de que precisamos usar isso em um elemento real porque modelo é usado como um recipiente para o seu conteúdo modelado. Ele atua como um wrapper em vez de um elemento HTML. Para corrigir isso, podemos alterar as tags de template para outra coisa, como um div e salvar isso. Agora, se voltarmos para o console e atualizar, lá agora vai embora e temos uma chave única trabalhando em nossa navegação. Essa é agora a nossa navegação concluída e também a nossa segunda instância de visualização. Vamos construir sobre isso no próximo vídeo, onde veremos como podemos acessar uma instância de exibição externamente de outra instância de exibição. 30. Acessando as instâncias do Vue externamente: Agora sabemos que podemos usar várias instâncias do Vue para controlar uma determinada seção de nossa aplicação. Nós discutimos como pode ser útil para fazer isso, para a funcionalidade relacionada ao grupo em conjunto, como agrupar toda a funcionalidade Navbar, como no nosso exemplo, ou até mesmo uma barra lateral talvez pudesse usar caso. Não podemos acessar diretamente coisas como nossos dados e métodos a partir de uma instância, de dentro de uma instância diferente usando essa palavra-chave; no entanto, há outra maneira de contornar isso. Se você quiser acessar dados de uma instância externamente, podemos dar a cada instância um nome de variável. Se passar para o nosso app.js e este tornar este um pouco mais legível clicando no botão de colapso à esquerda. Faremos isso na primeira instância. Em segunda instância. Pouco antes de chamar New Vue, e queremos adicionar um nome de variável de vm1 e definir isso igual à nossa nova instância vista; e, em seguida, fazer o mesmo para o segundo; Então vm2 variável. Muitas vezes você verá essas variáveis chamadas vm. Distância para o modelo vue, como Vue foi inspirado pelo padrão de design MVVM. Você pode ler mais sobre isso com o link no final da seção, se quiser. Este nome de variável é totalmente até você embora. Pode ser chamado de qualquer coisa que você gosta. Então eu posso referenciar nossa instância fora da instância usando JavaScript normal. Então, se quiséssemos mudar de dados na primeira instância do vm1, como a capacidade do evento. Podemos fazer assim. Se nos certificarmos do exterior ambos vm1 e vm2, podemos selecionar vm1. Capacidade de Eventude'. Então eu vou definir isso para 15. Agora, se formos até o aplicativo, podemos ver a mudança. Podemos ver que o atendente é agora 0 ou 15, em vez de o de 25. Suas alterações sendo feitas com JavaScript normal e de fora da instância view. Também podemos fazer o mesmo, mas de dentro de nossa segunda instância. Vamos adicionar um método à nossa instância vm2. Este método eu vou chamar 'capacidade alterada. Então dentro daqui podemos cortar o JavaScript que usamos antes. Então corte 'VM1.eventCapacity. Agora cole isso dentro da função. Em seguida, em HTML, podemos chamar este método adicionando um novo botão. Vamos adicionar um novo botão dentro da seção de navegação. Logo após a linha horizontal, vou adicionar um botão com um manipulador de cliques. Isso vai acionar o método de alteração de capacidade. Então, quando esse método é chamado, o método é executado dentro da instância vm2. No entanto, ele está alterando os dados de capacidade do evento de nossa instância vm1. Guarde isso. Se atualizarmos o navegador e, em seguida, clicar no botão, a capacidade deve mudar novamente para 15. Este é um exemplo realmente simples de como podemos acessar instâncias, ambos usariam JavaScript externamente e também de dentro de instâncias. É importante saber como fazer isso, se precisarmos ter acesso às nossas instâncias a partir de fontes externas. Vamos deixar esse vídeo lá e te vejo na próxima vez. 31. Propriedades e métodos da instância do Vue: Durante a construção deste projeto, adicionamos nossas próprias propriedades e nossos próprios métodos à instância do Vue juntamente com estes, que agora devemos ter uma melhor compreensão de como trabalhar com eles. Vue também nos fornece algumas propriedades e métodos aos quais temos acesso. Se formos ao vuejs.org, o que nos leva à página inicial do Vue. Então, se você clicar no link da API na parte superior, podemos ver a documentação da API. Se rolarmos para baixo usando a navegação à esquerda, podemos ver algumas coisas de aparência familiar, como nossas opções de dados, calculadas em métodos. Mais abaixo, há o que chamamos de propriedades de instância e métodos de instância. Todas essas propriedades são métodos, também têm um prefixo de sinal $, para que possamos facilmente distingui-los de outros. Se formos para o nosso aplicativo, podemos vê-los como parte de nossas instâncias. Vamos passar para app.js. Você tem que ir direto para o fundo podemos criar um registro de console. Eu só estou indo para o console registrar o conteúdo de vm1 que é a nossa primeira instância do Vue. Agora vamos até o navegador e abrir isso no console. Podemos ver que temos o conteúdo da instância do Vue. Alguns disso você já reconhecerá, como a propriedade 'el', que você pode ver está gerenciando nossa div com a idéia de aplicativo, que definimos anteriormente. Podemos usar essas propriedades e métodos, prefixo com um símbolo $, para acessar os dados que precisamos. Por exemplo, podemos alterar nosso log do console para exibir a propriedade 'el' adicionando um $el após vm1. Em seguida, dentro do console, podemos ver a div com a classe de aplicativo, que nossa instância está gerenciando. Vamos apenas remover esta propriedade el e dar uma olhada na instância completa novamente. Há muita coisa acontecendo aqui e vamos dar uma olhada em mais destes enquanto passamos pelo curso. Uma coisa que eu quero chamar sua atenção é para baixo perto do fundo, você pode ver que há muitos getters e setters. Estes são usados para obter valores e definir valores e significa que o Vue pode assistir e reagir às mudanças. Esses getters e setters são adicionados após a criação da instância do Vue. Você pode ver que estas todas as nossas propriedades de dados, que Vue proxies para nós e também nossos métodos computados. Temos formulários enviados e keyPressed acima deles, que não tem nenhum getters ou setters. Isso é porque eles são nossos métodos. Como sabemos, os métodos não assistem e reagem às mudanças, eles simplesmente re-renderizam quando há alteração no aplicativo. Além disso, se adicionarmos uma nova propriedade a uma instância do Vue depois que ela é criada, ela não será proxy por Vue.js, portanto não é reativa. Portanto, não observe quaisquer alterações. Podemos ver isso em ação adicionando uma nova propriedade para vm1. Voltar em app.js, se adicionarmos vm1.title, que ainda não existe, e vamos definir isso para uma string de texto de novo título. Agora, se formos para a instância vm1 no console, podemos ver que adicionamos uma nova propriedade chamada título para os getters Arnold ou setters. A propriedade não é reativa. Portanto, se você tem algum dado em nosso aplicativo que você deseja reagir às mudanças, ele deve estar lá após a criação, em vez de ser adicionado posteriormente. Nós não precisamos deste código para o projeto, então eu vou remover o botão e também o método de alteração de capacidade. Vamos em frente e fazer isso agora. No índice devemos mover o botão e, em seguida, nos métodos em app.js, podemos remover o método de capacidade alterado. À medida que passamos pelo curso, analisaremos mais dessas propriedades e métodos de instância do Vue com mais detalhes. Começando no próximo vídeo, vamos dar uma olhada no uso de refs. 32. Referenciando elementos com ref: No último vídeo, analisamos algumas propriedades e métodos que estão disponíveis para nós na instância do Vue. Uma dessas propriedades que podem ver é chamada refs. Podemos usar refs registrar uma referência a um elemento. Podemos colocar um árbitro em qualquer elemento que quisermos. Eu estou indo para ir para o índice para a página HTML. Se procurarmos o título da página, vou começar removendo uma chave dupla. Em seguida, simplesmente substituindo isso por lista de convidados. Em seguida, na tag de abertura h1, eu vou adicionar um atributo ref. A resposta é para um nome. Este não é um atributo HTML padrão, ele é fornecido a nós pelo Vue.js. Nós também livre para escolher qualquer nome ref que vai gostar. Agora tem esta referência aos elementos. Podemos trabalhar com ele em nossa instância do Vue. Vou adicionar um manipulador de cliques a este nível no cabeçalho, que você pode conectar a esta referência. Eu adicionaria clique. Vou definir isso para ser um nome de método de mudança de título. Todo esse elemento não é importante, ainda podemos rerigger esse método quando é clicado. Então vamos adicionar nosso método em app.js. Precisamos adicionar isso em vm2. Vamos adicionar nossos métodos e usamos um nome ou alterar o título. Em seguida, selecionamos o ref com este título atribuir refs. Então, de antes de todas as propriedades de exibição nativas têm o prefixo do cifrão. Em seguida, adicionamos o nome. Em seguida, ponto em um texto que é apenas JavaScript. Isso não é algo fornecido pelo Vue.js. Esperemos que agora você possa começar a ver o Vue.js e JavaScript baunilha normal funciona em conjunto quase perfeitamente. Podemos misturar em JavaScript com propriedades Vue e métodos onde precisamos. Agora, se salvarmos isso e passarmos para o navegador, se clicarmos no título, veremos que o título está sendo alterado. Junto com o uso de signo de dólar refs para definir dados, também podemos acessar dados usando isso. Se adicionarmos um log de console para mostrar este sinal de dólar ponto refs, podemos ver o que ele retornou. Dentro do método de mudança título em um log de console e este sinal de dólar refs. Então vá para o navegador. Podemos ver que um objeto é retornado. Também podemos ver que é um h1 que selecionamos. Se abrirmos esses objetos, teremos acesso a todos os dados associados dentro dele. Podemos ver o HTML interno que você redefiniu e também todas as outras propriedades que podemos acessar. Por exemplo, se olharmos para oculto, vemos que há definido como false por padrão. Podemos usar acesso refs signo de dólar e alterá-lo dentro do nosso método. Dentro do método changeTitle, podemos selecionar este ponto refs, nome do ponto. Dentro do método, podemos remover o texto interno e substituir isso por ponto oculto. Que podemos definir isso para ser verdade. Agora, se salvarmos isso e voltar ao nosso aplicativo, se clicarmos no título. Oculto é definido como true, modo que os elementos desaparecem. É assim que podemos usar o sinal de dólar refs propriedade para referência e elementos e os dados de conjunto ou acesso. Vale a pena mencionar também que podemos usar esta propriedade refs dentro e fora da ferramenta de instância vista. Há algo para estar ciente, porém, ao usar refs, que é refs e não reativo. Eles não são criados na renderização inicial. Eles são criados como resultado da função de renderização. Estamos alterando o elemento no DOM, mas não no modelo Vue.js. Portanto, alteramos algo que pode ser substituído por Vue.js em um dia posterior sempre que houver uma re-renderização, como algo para ter cuidado. No entanto, o uso de refs pode ser útil às vezes e talvez melhor usado para obter dados em vez de definir dados por causa da falta de reatividade. 33. Usando modelos de string: Durante este projeto, criamos nossas instâncias de exibição e, em seguida, montá-los para elementos HTML usando a propriedade L. Há também uma maneira alternativa que é criar um modelo de string dentro da instância view. Vamos em frente e criar uma nova instância de visualização para armazenar o título do nosso aplicativo dentro. Dentro daqui podemos usar a propriedade template, então eu vou descer até a parte inferior e criar uma nova variável, desta vez chamada vm3. Em seguida, isso vai conter nossa nova instância view, e como sempre, ele leva em nosso objeto opções. Aqui dentro, vamos adicionar uma nova propriedade template. Esta propriedade vai levar em uma string, então precisamos cercar a marca acima que fornecemos dentro das cotações. Vamos criar o título aqui. Assim como nosso título existente, vamos abrir as tags h1 e, em seguida, outro título da Lista de convidados e, em seguida, fechamos. Agora, se voltarmos para a página de índice, poderíamos remover o título do nosso HTML, a fim de vir para nossa nova instância de exibição. Agora, se salvarmos isso, se atualizarmos o navegador, podemos ver que o título foi removido da página. Isso ocorre porque criamos uma nova instância de exibição, mas não temos propriedade L, então o modelo está desmontado no momento. Podemos montar manualmente a instância usando $ sign mounts. Este é um novo método de instância que ainda não olhou, porque temos o nosso modelo é armazenado dentro de uma variável chamada vm3. Se voltarmos para o app.js, podemos montá-lo assim. Vamos digitar vm3. $mount e, em seguida, dentro do suporte, podemos adicionar os elementos que queremos montar. Vou usar o div com o ID da navegação. Como uma string vai passar no # e, em seguida, navegação, isso monta nossos modelos para a div de navegação, que já temos em nosso HTML. Vamos guardar isso e ver que efeito isso tem. Se voltarmos para o navegador e depois atualizar, agora temos o título h1 volta, que você configura dentro do modelo, mas você pode ver que perdemos os links de navegação e também o estilo. Vamos abrir as ferramentas do desenvolvedor clicando com o botão direito do mouse e indo para inspecionar, vamos dar uma olhada no que está acontecendo. Temos o nosso recipiente no topo, o que é bom, então imediatamente depois disso é o nosso título h1, seguido pelo div com o ID do aplicativo. Você pode ver que não há linhas Bootstrap ou qualquer uma das divs de grade de 12 colunas Bootstrap, que você tem dentro de nosso HTML. Além disso, nossa lista não ordenada para os links de navegação também não está lá, então por que isso? Bem, a razão é porque quando montamos um modelo para um elemento, este modelo substituirá qualquer marcação existente. Isso significa que todos os nossos links de navegação e classes Bootstrap, ele vai simplesmente usar o conteúdo do nosso modelo como uma nova marcação. Podemos adicionar essas divs extras e classes dentro da string template. Se voltarmos aos nossos modelos dentro do aplicativo e, em seguida, dentro da string, podemos começar a adicionar nossas classes Bootstrap em torno do título de nível 1. Antes disso, podemos adicionar uma div com uma classe de col-sm-12, e também podemos adicionar text-center para alinhar isso no meio da página. Após o título de nível 1, queremos fechar esta div e depois salvar isso. Se voltarmos para o navegador, podemos ver que este é re-introduzido o estilo Bootstrap, que tínhamos antes. Mas, como você pode ver, as coisas em breve começarão a parecer bastante bagunçadas dentro do modelo. Além disso, há outra limitação. Não podemos dividir isso em várias linhas para torná-lo ainda mais legível. Se movermos o nível 1 indo para sua própria linha e logo após o dia adicionaremos a div de fechamento também em sua própria linha. Guarde isso e volte para o navegador. Podemos ver que isso não funciona. Há uma maneira de contornar isso, se formos para os modelos, podemos colocar cada linha em sua própria string. Adicione a cotação no início e no final de cada linha, e então podemos adicioná-los junto com o símbolo de adição. Salve isso e atualize, para que possamos ver que está tudo em nosso trabalho novamente. Esta solução ainda parece um pouco confuso, então podemos ser os melhores para usar com código simples. Além disso, desde vista JS fornece-nos com esta propriedade L para integrar nossa sintaxe modelo dentro do HTML. Isso é muitas vezes visto como uma alternativa melhor. Eu vou voltar para o nosso app.view e, em seguida, uma vez que você remover esta nova instância do vm3, apenas para retornar o projeto de volta ao que era. Remova essa variável vm3, remova a montagem e, finalmente, se voltarmos para a página de índice, poderemos reintroduzir o título da Lista de convidados novamente no HTML. Salve isso e agora nosso aplicativo está de volta ao que era antes de usar a propriedade L. É assim que criar um modelo de tela. É importante saber isso, pois você pode se deparar com ele em aplicativos e também ao passar pela documentação, você também pode ver ao trabalhar com componentes. Em seguida, finalizaremos esta seção examinando o ciclo de vida da instância de exibição. 34. O ciclo de vida do Vue: Agora devemos ter uma melhor compreensão de como Vue.js cria um modelo e gerenciá-lo para o DOM. Ao criar instâncias do Vue, no entanto, há algo importante acontecendo nos bastidores, que ainda não analisamos e esse é um ciclo de vida da instância do Vue. Podemos nos conectar a vários estágios do ciclo de vida, como antes da instância ser criada ou antes de haver uma atualização, por exemplo, e podemos dizer ao Vue qual código deve ser executado em cada um desses pontos específicos do ciclo de vida. Há vários desses ganchos de ciclo de vida que podemos usar, então vamos dar uma olhada neles agora. Agora devemos estar familiarizados com a criação de uma nova instância do Vue usando o novo Vue, que podemos ver está no topo deste desenho. Este é o ponto de partida do ciclo de vida antes de observar os dados e inicializar quaisquer eventos. O palco também deve fazer sentido agora porque sabemos de vídeos anteriores que após a criação da instância do Vue, Vue.js está ciente dos dados dentro dele e cria o efeito observador. Entre essas duas primeiras etapas, podemos chamar o primeiro de nossos ganchos de ciclo de vida, que é chamado befoRecreate. befoRecreate, como o nome indica, é um método que podemos usar para definir qualquer código que queremos executar antes que qualquer um de nossos dados seja observado ou quaisquer métodos tenham sido inicializados. Se queremos executar o código após os dados e métodos são inicializados, então precisamos usar o gancho criado. Isso significa que nossa instância está sendo criada, todos os dados estão sendo configurados, como observadores , propriedades computadas e quaisquer métodos, embora ainda não tenha sido montado no DOM nesta fase. O próximo estágio do ciclo de vida está relacionado aos modelos. Usamos a propriedade template e também criamos modelos dentro do nosso código HTML nesta seção, é aqui que Vue.js procurará essas opções e, em seguida, compilará esses modelos quando necessário. Depois que os modelos foram compilados usando a propriedade template ou pesquisando os modelos em HTML com a propriedade el, nosso próximo gancho de ciclo de vida é executado. Este gancho é chamado BeforeMount. BeforeMount é chamado pouco antes da montagem da instância começar, e logo antes da função de renderização será chamada pela primeira vez. Em seguida é substituir el com modelo, agora Vue.js tem nossos modelos prontos. Ele tem todo o HTML preparado que pode ser lido pelo navegador. As chaves ou a interpolação que vemos no editor serão substituídas pelos valores de dados correspondentes. É por isso que não podemos ver as chaves duplas quando damos uma olhada dentro das ferramentas do desenvolvedor. Isto significa que os elementos que especificamos usando el serão substituídos pelo nosso modelo compilado. Agora tudo está no lugar para montar nosso modelo para o DOM. Nós não terminamos uma vez que nosso estágio de montagem da instância é atingido. Discutimos a reatividade durante este curso e como o Vue observa mudanças e, em seguida, reage a essas mudanças obtendo o DOM. Este é o efeito que podemos ver na extrema esquerda, que é a re-renderização DOM virtual e patch. Este é um ciclo contínuo e a rerenderização DOM virtual e o patch são acionados quando alguns dados reativos ou muito são alterados. Em seguida, temos BeforeUpdate. Este ciclo de atualização nos fornece dois novos ganchos de ciclo de vida. Primeiro é BeforeUpdate, e isso como parece, é chamado antes de quaisquer alterações de dados. Em segundo lugar, há o gancho atualizado. Aqui é onde podemos adicionar qualquer código que queremos executar quando houve uma alteração de dados detectada, que faz com que o DOM virtual seja re-renderizado. Vue.js recomenda evitar esse gancho na maioria dos casos, pois somos fornecidos com a propriedade do computador e também observadores que devem ser encaminhados sempre que possível. próximo é o gancho BeforeDestroy. Isso é chamado logo antes de uma instância do Vue ser destruída. No momento em que é chamado, a incidência ainda é totalmente funcional, nada começou ainda para a fase de destruição. Em seguida, o Vue prepara a instância para ser destruída removendo todos os relógios, ouvintes de eventos e também quaisquer componentes filho. Ainda não cobrimos os componentes, mas faremos em breve. Finalmente, nós destruímos, então este é todos os estágios do ciclo de vida da instância do Vue e na instância que está sendo destruída. Quando isso acontece, o gancho destruído final é chamado. Não há nada de magia acontecendo nos bastidores, apenas uma série de etapas da instância do Vue, que agora você pode ver que podemos usar esses ganchos. Na verdade, há mais dois ganchos chamados ativados e desativados. Estes não estão normalmente disponíveis nesta instância regular, mas sim disponibilizados ao usar um componente kept-alive. Vamos cobrir componentes de kept-alive na seção de componentes mais tarde, mas por enquanto, vamos passar para o último vídeo. Nesta seção, vamos colocar em prática esses ganchos de ciclo de vida para vê-los em ação. 35. Ganchos do ciclo de vida do Vue em ação: Agora, sabemos como funciona o ciclo de vida do Vue e como podemos explorar cada uma dessas fases do ciclo de vida usando o Hooke fornecido a nós pelo Vue Js. Estes ganchos são bastante simples de adicionar ao nosso aplicativo. Vou agora mostrar-vos um exemplo básico destes em acção. Tudo o que vamos fazer é criar cada um desses ganchos que olhamos no último vídeo e então simplesmente fazer um registro de console quando cada um desses ganchos for chamado. Isso é útil, como podemos ver, a ordem em que eles estão conectados ao console. Durante o ciclo de vida da instância, esses ganchos são adicionados à raiz da instância de exibição em vez de dentro de qualquer um dos métodos ou propriedades de dados. Vamos passar para o nosso app.js. Então, se nós rolar para baixo até a parte inferior do vm1 e, em seguida, adicionar uma vírgula logo após os filtros, aqui, nós podemos adicionar nosso primeiro gancho, que vai ser befoRecreates. A sintaxe é bastante semelhante aos métodos. Isto é uma função. Em seguida, dentro do corpo da função, podemos pedir o nosso registro do console. Eu só estou indo para o console registrar o texto de befoRecreates. Embora este seja um exemplo simples com um log de console, dentro deste corpo de função, podemos adicionar qualquer código que queremos executar antes que a instância tenha sido criada. Eu vou adicionar uma vírgula no final e, em seguida, basta copiar isso antes de eu criar gancho. Então eu vou colar isso em sete vezes mais para que você possa ver todos os oito ganchos em ação, então 1, 2, 3, 4, 5, 6, 7. Agora, vou remover a vírgula da última. O segundo é o gancho criativo. Em seguida, altere o texto para criado dentro do log do console. Então temos antes de montar. Em seguida, é claro, o próximo trabalho é montado, então altere o nome para o gancho montado e, em seguida, adicione o texto dentro do log do console. Em seguida, passamos para as fases atualizadas. Primeiro, temos BeforeUpdate, seguido de atualizado. Então, finalmente, os dois últimos são uma fase destruída, então o segundo para o último é antes de destruir. Então, finalmente, o último gancho é a fase destruída. Guarde isso. Se agora vamos para o navegador e em seguida, clique com o botão direito do mouse e “Inspecionar” para abrir as ferramentas de desenvolvedor. Selecione o console e podemos ver que os primeiros quatro ganchos são chamados, temos befoRecreates, criado, BeforeMount e também montado. Isso faz sentido porque a instância foi criada e também montada. Mas não causamos nenhuma alteração de dados para atualizar ou fazer com que a instância ainda seja destruída. Se formos até o campo de entrada e digitar algo dentro de lá, podemos ver agora que temos as atualizações antes e atualizações disparadas para cada pressionamento de tecla que fazemos. Temos esse comportamento porque temos a propriedade data da nova configuração de texto de nome dentro de nossos objetos de dados. Além disso, adicionamos isso ao campo de entrada com ligação de dados bidirecional usando modelo V. Lembre-se também que qualquer configuração de propriedade de dados, escolhido na criação da instância de exibição é então assistido pelo Vue js e atualizações acionam uma re-renderização. Isso só deixa os ganchos do ciclo de vida antes de destruir e destruídos a serem acionados. Se você se lembrar do vídeo usando modelos de string, usamos o método de instância do Vue fornecido ferramentas chamadas $Mounts para montar o modelo para a div selecionada no lugar da propriedade el. Vue js também nos fornece um outro método de instância chamado $Destroy. Isto como parece, destrói uma instância do Vue e faz todo o trabalho de limpeza, como remover todos os ouvintes de eventos e na vinculação de todas as diretivas que configuramos. Se voltarmos para a página de índice e localizar o formulário, já temos um manipulador de eventos em enviar. Podemos facilmente usá-lo para chamar o método de destruição, então se apenas adicionar $Destroy dentro de lá. Agora, se atualizarmos o navegador e, em seguida, digitar algum texto para acionar uma atualização. Então, finalmente, pressione o botão que é chamado de “Método Destruir”, agora podemos ver todos os ganchos do ciclo de vida agora são acionados dentro do console. Agora, nossa instância vm1 foi destruída. Vue não está mais no controle de nossa seção de inscrição. Podemos ver isso tentando adicionar um novo nome à nossa lista de convidados. Você saberá que ele está dentro do console à medida que digitamos, nenhuma atualização é acionada. Nossa instância do Vue foi desconectada e agora não tem controle sobre as saídas. O HTML ainda está em vigor. Ele simplesmente não será atualizado mais. Vamos terminar voltando para a página de índice e de volta para o método de envio. Podemos remover o método destruir e, em seguida, restabelecer o aplicativo para trabalhar em ordem, adicionando o nosso método formulário enviado. É assim que o ciclo de vida do Vue js funciona na prática e como podemos nos conectar a cada etapa. Obviamente, cada gancho de ciclo de vida pode ser usado para executar tarefas mais complexas do que um simples registro de console. Mas eu só queria mostrar que estágio cada gancho é chamado e também mostrá-los em ação. 36. Desfecho da seção: um olhar mais aprofundado no Vue: Espero que tenha gostado desta seção e construindo seu primeiro projeto. Até agora, devemos estar ficando muito mais familiarizados com como o Vue.js funciona e o que ele pode fazer. Se você ainda se sentir um pouco sobrecarregado, não se preocupe. Isso é completamente normal e você terá muito mais prática do que aprendeu até agora. Agora vamos passar para uma nova seção onde não só começaremos um novo projeto, mas também veremos como podemos usar ferramentas de compilação e como elas podem melhorar configuração do nosso projeto junto com nosso fluxo de trabalho. Te vejo lá. 37. Introdução da seção: ferramentas de criação e fluxo de trabalho: Esta seção é focada e como podemos usar ferramentas de construção para melhorar nossos projetos. Além disso, como podemos melhorar nosso fluxo de trabalho, tornando-o mais adequado para aplicações de mobilidade em maior escala. Vamos usar essas novas ferramentas de compilação para configurar nosso próximo projeto, chamado Creative Cards. Neste projeto, vamos construir um aplicativo de cartão onde o usuário pode criar seu próprio cartão personalizado com seus próprios textos e imagens personalizados. Espero que você esteja ansioso para começar com o novo projeto. Vamos começar instalando ambos Node e NPM. 38. Instalando o Node e NPM: Durante esta seção, estaremos configurando nosso próximo acima de uma maneira ligeiramente diferente da última vez. Usaremos uma ferramenta chamada View CLI. Analisaremos a visualização da CLI e o que ela pode fazer por nós no próximo vídeo. Mas, por enquanto, precisamos instalar o Node JS e o NPM, que ambos precisávamos para que a visualização CLIT seja executada. Vou até o meu navegador. Então eu vou para o nodejs.org, e ele vai levá-lo para a página inicial do nó J-s. Node JS basicamente nos permite usar JavaScript no servidor em vez de apenas dentro do navegador onde ele tem sido historicamente usado. Ele pode ser usado para criar fotos de um servidor web, mas em vez disso irá mesclar na visualização CLI lida com essas fotos. download do nó JS também inclui NPM. O NPM é um gerenciador de pacotes de nó. Vamos para o NPMJS.org. Este é o site do gerenciador de pacotes NPM. Isso nos permite ter acesso a milhares de pacotes JavaScript de código que podemos adicionar ao nosso projeto. Entre o que é devido neste projeto está o uso de pacotes como web pack e bubble, que vamos olhar em mais detalhes em breve. Também usamos o Firebase para o nosso armazenamento de fotos, que tem um pacote NPM para instalar. Até mesmo ver em si é instalado como um pacote. Primeiro vamos voltar ao Node JS, vou começar a instalação. Eu vou para os Downloads, e então se você escolher um download para o seu sistema específico, se você não tiver certeza de qual deles escolher, a página inicial normalmente detectará automaticamente qual sistema você está usando, então devemos ter o download correto disponível. Vou instalar a versão mais recente. Vou clicar em Correntes. Dá alguns segundos para baixar. Uma vez que isso é feito e basta abrir e instalar da maneira usual. Estou usando um Mac, mas pode ser um pouco diferente no Windows. Mas você não deve ter problemas. Eu só vou continuar e concordar com o licenciamento e, em seguida, clique em Instalar. Dê-lhes um momento para terminar a instalação. Então teremos Node e NPM instalados em nossa máquina. Vamos verificar se isso foi instalado com sucesso, eu vou para o terminal. Estou usando um Mac para este curso, mas se você estiver usando um computador Windows, você também terá acesso a um programa de linha de comando, como o Windows PowerShell. Dirija-se a isso se você estiver usando um computador Windows. Todos os comandos que usamos neste curso devem ser aplicáveis a ambos. Vamos fazer isso um pouco maior, e quando verificamos temos Node e NPM instalado, com alguns comandos simples. Primeiro eu vou digitar Node e, em seguida, -v. Se você vir a exibição do número da versão logo abaixo, isso significa que Node um instalado com êxito, o mesmo com NPM. NPM -v atualmente é 5.0.3. Se, como eu, você tem os números de versão exibidos como este, você instalou com sucesso Node e NPM e agora está pronto para passar para o próximo vídeo, onde veremos a visualização CLI e como usá-lo para configurar nosso projeto. 39. Aplicando scaffolding em projetos com o vue-cli: No último vídeo, instalamos com sucesso node.js e o gerenciador de pacotes de nó. Neste vídeo, vamos usar uma ferramenta chamada Vue CLI para andaimes nossos projetos. CLI significa interface de linha de comando e permite criar um novo projeto com a maior parte da configuração comum já cuidada para nós. Os projetos JavaScript podem ficar bastante complexos ao configurar todas essas ferramentas de compilação nós mesmos, juntamente com todos os pacotes NPM que vemos com frequência. Vamos para o Google e vamos procurar o Vue CLI e precisamos do primeiro que é o link GitHub para o Vue CLI. Selecione isso e, em seguida, seremos levados para a página oficial do GitHub. Se rolarmos para baixo, antes de tudo podemos ver a instalação, mas vamos para isso em apenas um momento. Se descermos para os modelos oficiais, podemos ver os modelos disponíveis atuais que incluem os mais complexos, que é uma versão webpack totalmente caracterizado que inclui todo o recarregamento quente e testes que comumente precisamos para projetos. Existe uma versão mais simples deste webpack 1 e vamos usá-la para estes projetos. Se você preferir browserify sobre webpack, há também um padrão e uma versão simples para estes dois também. Mas vou ficar com o webpack pelo resto deste curso. Há também uma versão simples que é apenas um único arquivo HTML que é mais parecido com o aplicativo lista de convidados que criamos antes. Esses modelos nos economizam muito tempo ao criar novos projetos, pois caso contrário teríamos que instalar e configurar tudo o que precisamos manualmente. Para o próximo projeto, usaremos o modelo simples do webpack, pois não precisamos da configuração mais complexa do webpack com o teste. Para instalar isso, vamos voltar para o terminal e, em seguida, instalar o Vue CLI com o gerenciador de pacotes de nó e isso é feito com NPM instalar e, em seguida, traço G para instalar este pacote globalmente e, em seguida, o nome de o pacote é o Vue CLI e, em seguida, pressione “Enter”. Se você estiver em um Mac e isso não funcionar, talvez seja necessário usar a pseudo palavra-chave antes. Isso é instalado com os privilégios de administrador e você também precisa adicionar uma senha. Adicionar pseudo NPM instalar traço G Vue CLI. Alternativamente, se você quiser alterar seus privilégios sem usar pseudo, também adicionarei um link no final desta seção. Isso permitirá que você configure sua máquina como administrador sem precisar digitar pseudo toda vez que você instalar um novo pacote. Isso instala o Vue CLI globalmente, possamos usá-lo para todos os nossos projetos em vez estar disponível apenas para o projeto que estamos criando atualmente. Uma vez instalado, a última coisa que quero fazer é navegar até a área onde queremos criar o projeto. Vou adicionar o meu à área de trabalho. Para voltar ao diretório home, digitamos CD. Usamos LS para exibir o conteúdo do diretório atual. Podemos ver que temos o desktop disponível, então para mudar para isso podemos usar CD novamente, seguido de desktop. Então podemos ver que estamos agora dentro da área de trabalho. Agora, quando configuramos o projeto, ele será instalado neste local. Agora vamos inicializar o projeto dentro do terminal. Para configurar um novo projeto do Vue CLI, usamos o Vue nele seguido do nome do modelo que queremos usar. Eu vou estar usando webpack simples. Em seguida, damos um nome ao projeto, então este nome deste projeto vai ser cartões criativos. Quando isso for feito, aperte “Enter”. Então, uma vez instalado e uma vez que o template é baixado, teremos que responder algumas perguntas simples. O primeiro é o nome do projeto. Atualmente está configurado para cartões criativos que já digitamos. Então, se quisermos isso, podemos apertar “Enter”. Nós também podemos adicionar uma descrição do projeto, mas eu só vou entrar para isso. Adicione o nome do autor, então eu adiciono meu nome lá. Usar o SASS? Eu não vou usar nenhum SASS para esses projetos, então eu vou apertar “Enter”. Como você pode ver, já está definido como não. Agora ele nos dá uma lista dos passos que precisamos tomar apenas para terminar isso. Primeiro de tudo, precisamos CD para mudar o diretório para o projeto de cartões criativos que acabamos de configurar. Vou apertar “Enter”. Uma vez que você tenha feito isso, o próximo passo é executar a instalação do NPM e isso faz o download de todos os pacotes NPM que são necessários. Todos esses pacotes estão listados dentro de um arquivo chamado package.json e vamos explorar o conteúdo deste arquivo em breve. Isso pode levar um pouco de tempo dependendo de quantos módulos NPM você tem. A etapa final é NPM run dev e isso é executar o servidor de desenvolvimento dentro do navegador. Eu não vou executar isso ainda porque eu vou executar isso dentro do código do Visual Studio. Vamos fechar o Windows e agora devemos ver que nosso projeto de cartões criativos está agora na área de trabalho. Vou abrir isso dentro de um Visual Studio, então vamos abrir isso e arrastar os projetos de cartões criativos para isso. Então, agora, se passarmos para ver e, em seguida, descer para o terminal integrado, podemos então iniciar o nosso servidor de desenvolvimento. NPM executar dev e, em seguida, pressione “Enter”. Então espero que isso deve abrir no navegador e deve levar um momento para abrir. Se você ver isso, então estamos prontos para ir. Nosso servidor de desenvolvimento está agora configurado. No terminal podemos ver onde o projeto está sendo executado, então podemos ver isso está sendo executado na porta 8080. Talvez seja necessário copiar este link e colá-lo no navegador se ele não abrir automaticamente. Um servidor de desenvolvimento nem sempre é necessário, mas faz sentido usar um já que permite criar nosso aplicativo e condições de teste semelhantes a um ambiente de servidor real. Ele também tem benefícios adicionais, como recarga ao vivo. O navegador atualizará as alterações sem a necessidade de atualizar a página. Agora temos o projeto criado e nosso servidor web funcionando. Vamos explorar esses arquivos e pastas que nos foram fornecidos com o Vue CLI. 40. Explorando o layout do nosso projeto e ferramentas de criação: No último vídeo, criamos com sucesso nossos novos projetos de cartões criativos usando o Vue CLI. Agora tenho o projeto aberto no Visual Studio e o servidor de desenvolvimento funcionando. Agora eu só quero tirar alguns momentos para olhar para a estrutura do projeto, que nós realmente criamos. Se olharmos para os arquivos e pastas no lado esquerdo, podemos ver que a primeira pasta são os módulos do nó. Esta pasta é onde todos os módulos MPM são instalados quando executamos o comando de instalação MPM no último vídeo. Este é o lugar onde coisas como a Biblioteca de Chamadas View está localizada, e agora temos isso como um pacote, não precisamos usar os links CDN, como fizemos nos primeiros projetos. Em seguida, temos a pasta de origem. A pasta de origem será onde fazemos a maior parte do nosso trabalho. É aqui que vamos adicionar a maior parte do nosso código para os projetos. Isto contém todos os nossos arquivos fonte de projetos, e estes são todos armazenados no servidor em vez de estar disponíveis para o público ver. Em seguida, temos o arquivo dot babelrc. Este é o arquivo de configuração para uma ferramenta que instalamos chamada babel. À medida que passamos pelo curso, aproveitaremos alguns dos novos recursos JavaScript da versão mais recente do JavaScript, que é chamado ES6 ou ES2015. Tanto o ES6 quanto o ES2015 são a mesma coisa. ES6 é a versão, ES2015 é o ano do lançamento. O ES, que está em ambos, significa ECMAScripts. ECMAScript é um padrão ou especificação para linguagens de script, enquanto JavaScript é a linguagem de script real, que é baseada no padrão. Quando falamos sobre ES6 ou ES2015, estamos falando sobre a mesma coisa. No entanto, o navegador não pode entender esse novo código. É aqui que entra um babel. Ele pega nosso código e compila para ser convertido de volta para ES5, que pode então ser lido pelo navegador. Voltaremos a isto mais tarde. Gitignore é para o sistema de controle de versão git. Aqui é onde podemos listar todos os arquivos ou pastas que você não quer ser rastreado pelo git. Então temos nosso arquivo index.html familiar. Isso funciona como no último projeto, onde ainda temos nosso contêiner de aplicativos principal. Também temos uma tag de script na parte inferior. No primeiro projeto, tínhamos apenas um arquivo JavaScript, que é o nosso arquivo app.js, que tinha todo o nosso código js view dentro. Este projeto funcionará de forma diferente porque teremos muitos arquivos, principalmente porque estaremos cuspindo nossa base de chamadas em módulos separados chamados componentes. Vamos então usar webpack, que é instalado com o Vue CLI, onde pack é um pacote de módulo, que basicamente leva todo o nosso código que você escreve, juntamente com quaisquer dependências como babel, e então agrupa tudo em um arquivo. Este arquivo de pacote, que teremos na parte inferior aqui, não é lido pelo navegador. A saída de seu arquivo compilado é o arquivo build.js, que você pode ver aqui. Você também pode notar que não há nenhuma pasta dist na árvore do projeto. A pasta Dist só é criada quando construímos para produção, e ainda não fizemos isso. Estamos apenas trabalhando com o servidor de desenvolvimento por enquanto. Nós também temos o arquivo package.json, que você pode reconhecer se você já trabalhou com nó no passado. Este arquivo contém informações sobre nosso aplicativo, e também inclui quaisquer dependências de módulo que você possa ter. Vou fechar este terminal só para que possas ver mais. O Vue CLI já está preenchido, o nome e a descrição, e também algumas informações sobre esses projetos. Esta é a informação que fornecemos durante o processo de instalação. Os scripts ASM fornecidos como dev e build. Usamos o dev antes ao executar o servidor de desenvolvimento, usando o npm run dev, executando o npm reconstruído, construirá nossa produção de aplicativos. Ele também criará a pasta de distribuição para o nosso pacote. Esta compilação de produção também minifica o nosso núcleo 2. Então temos uma lista de quaisquer dependências, os projetos, como view js. Nós também podemos especificar quaisquer dependências que só queremos usar para desenvolvimentos nos objetos de dependências de desenvolvimento como babel porque nós só queremos usar isso durante o desenvolvimento para então converter nosso código pronto para produção. Em seguida, teremos um arquivo README também com as instruções para executar e construir nosso aplicativo e, em seguida, um arquivo webpack.config, isto como o nome sugere é onde podemos configurar webpack. Eu não vou entrar em tudo aqui em detalhes como webpack pode ser um tópico de curso por si só, mas uma das principais coisas são os caminhos de arquivo de entrada e saída, que você pode ver aqui. O ponto de entrada é o nosso arquivo de origem, que é main.js, que está dentro da nossa pasta de origem. Embora tenhamos muitos arquivos de origem ao criar componentes, todos eles ainda são processados através deste arquivo main.js e veremos isso com mais detalhes em breve. A saída é o nosso arquivo build.js e este é o arquivo final que é executado dentro do navegador com todo o nosso código de compilação. Então podemos adicionar coisas como carregadores. Como eu mencionei antes, estamos usando babel para converter qualquer código ES6 em JavaScripts regulares e aqui está o carregador babel, que procura por quaisquer arquivos com extensão the.js. Muitas vezes aqui também veremos uma lista do que é chamado de presets 2, mas porque temos o arquivo babel.rc, temos todas as nossas predefinições ativas lá. predefinições são um pouco como adicionar plugins. Eles são predefinições disponíveis para não apenas converter código ES6, mas também coisas como código jsx e a biblioteca react. Se nos dirigirmos para a nossa pasta de origem e, em seguida, clicar em main.js, este é um arquivo principal para webpack para usar. Este arquivo importa a biblioteca de exibição e também o arquivo de aplicativo principal chamado App.vue. Você pode pensar em atualizar app.vue como o wrapper principal ou o arquivo pai para todos os componentes em que criamos. É por isso que o ponto de entrada webpack é main.js, porque ele processa App.vue e, em seguida, este arquivo App.vue contém todo o resto siga código no aplicativo. Você também verá a propriedade el familiar, que é o ID dentro da página de índice onde queremos renderizar nosso conteúdo para. Se explorarmos app.vue, isso é o que é chamado de componentes de arquivo único. Tem uma extensão.v e os conteúdos são divididos em três seções. Primeiro de tudo, temos a seção de modelo. Um modelo é o conteúdo principal do componente. Aqui podemos criar nossa marcação html que queremos usar dentro dos componentes. Nós também podemos misturar em nossos dados de visualização com as chaves duplas como fizemos anteriormente. Abaixo disso, temos nossa seção de script. Então, muito isso parecerá familiar da última seção. As tags de script onde queremos incluir nossas propriedades de datas vuejs, nossos métodos, propriedades computadas e todo o resto que vimos até agora e também qualquer JavaScript simples também. Analisaremos isso com mais detalhes durante os projetos. Mais abaixo, temos a terceira e última seção do nosso componente, que é a seção Estilo. Também podemos adicionar estilos a este modelo. Temos as opções para fazer esses estilos aplicados a todo o nosso App. Vou contê-los a este modelo em particular. Dividir nosso código como este em um único modelo de arquivo é possível usando ferramentas de contas, como webpack, que agrupa tudo para nós em um arquivo de saída empacotado no final. Então, esta é uma visão geral da estrutura do nosso novo aplicativo, que foi configurado usando o Vue CLI. Agora eu sei que as coisas podem parecer um pouco complicadas no momento se este tipo de configuração não é familiar para você, mas nós estaremos usando esta estrutura para o resto do curso. Então, no final, você deve estar muito mais confortável depois de um pouco mais de prática. 41. Usando o objeto de dados com modelos de arquivo único: No último vídeo, começou a olhar para os modelos de visualização de arquivo único. Agora eu quero dar uma olhada na maneira como os scripts funcionam, particularmente usando a propriedade data que você já usou durante este curso. Primeiro, vamos certificar-nos de que o nosso novo aplicativo está em execução. Se o seu servidor é para ser executado, ótimo, você pode simplesmente ir para o seu navegador e ver o aplicativo em execução assim. Se você voltar depois de uma pausa e o serviço não estiver em execução, precisamos reiniciar o servidor de desenvolvimento. Vá para o Visual Studio Code e, em seguida, vá para o terminal integrado. Se estiver usando o terminal padrão, não está usando seu interior do Visual Studio ou seu editor de texto. Você pode precisar usar Cd para mudar para o diretório atual, e executar mpm, executar dev a partir daí. Dentro do terminal, meu servidor de desenvolvimento ainda está funcionando. Estou lançamento fecha termo, temos controle e, em seguida, c, e então somos levados de volta para o diretório do projeto. Para chegar à frente e novamente, precisamos executar mpm run dev e, em seguida, pressione enter. Então, uma vez que você começa a reabrir o navegador, se o servidor estiver funcionando bem, mas não abrir no navegador, você pode abrir digitando localhost: 8080 dentro do navegador lá, e então ele deve ser executado. A página inicial que você vê é composta do logotipo, dos links essenciais e também dos links do ecossistema. Podemos vê-los se você for até o projeto e, em seguida, abrir o arquivo app.vue. Sempre código deve ser contido dentro das tags template, que é a seção superior, modo que temos o link de imagem até o topo. Em seguida, temos o cabeçalho do ecossistema seguido pelos links que já vimos antes. Isso tudo é apenas html normal, e você pode até mesmo misturar em dados de visualização, assim como fizemos anteriormente. No script abaixo, se formos para a nossa instância de exibição, temos a propriedade de dados da mensagem, que diz, bem-vindo ao seu aplicativo vue.js. Podemos ver se vamos para o navegador, não temos estes exibindo na página. Podemos facilmente adicionar isso em nosso modelo. Eu vou adicionar isso apenas sobre o topo, apenas por abrir as chaves duplas. Em seguida, podemos adicionar a mensagem datas propriedade lá, e salvar isso. Então, agora, se formos para o navegador, podemos ver que diz bem-vindo ao seu vue. Aplicativo JS. Você deve ter notado que não precisamos fazer uma atualização de página desta vez. Este é o recarregamento a quente, que é fornecido pelo pacote web. Se formos para o package.js no arquivo, quando executamos o mpm executar def. Podemos ver que também executa o comando dash hot, e é daqui que vem a recarga quente. De volta ao aplicativo. vue, se temos apenas um pequeno aplicativo, podemos criar todo o nosso aplicativo dentro deste único modelo. Vamos dividir este aplicativo em componentes menores na próxima seção. Para tornar as coisas mais autônomas e gerenciáveis, você saberá que é o interior de nossas tags de script, nossa instância de visualização parece um pouco diferente do que usamos nos últimos projetos. Ainda podemos incluir todos os mesmos métodos, propriedades computadas e relógios, por exemplo. No entanto, a propriedade data funciona um pouco diferente. Os scripts e até mesmo a seção de estilo não são necessários para executar. Podemos até excluí-lo e depois atualizar o navegador. Você pode ver que o absoluto é executado, mas sem a exibição de dados da mensagem, é claro. Vamos adicioná-lo de volta e podemos dar uma olhada nas diferenças. Primeiro de tudo, precisamos criar nossas tags de script. A primeira coisa que precisamos fazer é fazer uma exportação, padrão, e, em seguida, circundante no código levanta. Isso faz parte do sistema do módulo ES6. Exportar o módulo basicamente significa que agora ele estará disponível para ser usado como uma importação, dentro de arquivos. Podemos ver esta importação dentro dos js principais. O arquivo app.vue é importado especificando um caminho de arquivo, e também é dado o nome do arquivo, neste caso do aplicativo. Vamos exportar todos os módulos ou componentes durante este projeto e importá-los quando necessário, para que você tenha muita prática de fazer isso. Vamos voltar para o app.vue. Agora, se tentarmos adicionar nossa propriedade de mensagem de volta, se tentarmos adicionar nossos dados, assim como fizemos no último vídeo, criando nossos objetos de dados e, em seguida, definir a mensagem igual a uma string, eu vou apenas adicionar bem-vindo a isso. Se salvarmos isso e passarmos para o navegador, vamos dar uma olhada. Não temos a propriedade de mensagem de boas-vindas exibida na tela. Vamos abrir as ferramentas de desenvolvedor e, em seguida, entrar no console. Temos alguns erros. Primeiro vemos que a opção de dados precisa ser uma função. Em seguida, isso também faz com que o segundo aviso nos informando que a propriedade message não está definida. Para corrigir isso, precisamos incluir a propriedade de dados como uma função que, em seguida, retorna alguns dados. Para fazer isso, retorne a propriedade data em uma função como esta. Então, dentro disso, precisamos retornar alguns dados. Abra as chaves duplas e, em seguida, dentro desta declaração de retorno, podemos adicionar nossa propriedade de dados, exatamente assim. Agora, se salvarmos isso e passar para o navegador, agora perdemos as mensagens de erro, que é ótimo, e agora temos a mensagem de boas-vindas exibida. Há uma boa razão pela qual precisamos retornar os dados dentro de uma função, ao usar componentes. Isso ocorre porque os componentes devem ser reutilizáveis. Se você tiver mais de um componente compartilhando exatamente a mesma propriedade de dados, todos os componentes precisarei compartilhar o mesmo valor dos dados, eles também serão atualizados juntos, quando houver uma alteração. Adicionar dados como uma função permite que todos os componentes mantenham seus próprios estados internos. Usando nosso exemplo, poderíamos ter vários componentes que todos precisam de uma propriedade de mensagem, mas usando uma função, a mensagem agora pode ser diferente para cada componente. Isso permite que os componentes compartilhem um modelo comum que ainda mantém o controle de seus próprios dados ou estados internos, se necessário. 42. Desfecho da seção: ferramentas de criação e fluxo de trabalho: Este é o fim de uma seção muito segura, mas mesmo assim, importante. Agora temos uma nova configuração de projeto, que é mais escalável e nos permite trabalhar com novos recursos, como componentes. Esta estrutura de componentes será o tema da nossa próxima seção, então estou ansioso para vê-lo lá. 43. Introdução da seção: introdução aos componentes: À medida que nossos aplicativos crescem e se tornam mais complexos, uma configuração como nosso aplicativo de lista de convidados pode não ser ideal. Nosso arquivo de visualização de ponto de aplicativo único pode crescer rapidamente e ficar inchado, dificultando a manutenção e o teste. Usando uma configuração como temos agora, usando Webpack, agora podemos dividir nosso código em módulos ou componentes menores. Isso torna nosso arquivo menor, mais fácil de manter e testar, e também nos permite reutilizar componentes mais de uma vez. Temos muito a abordar nesta seção, então vamos direto para os componentes de aprendizagem. 44. O que são componentes?: Um dos excelentes recursos do vue.Js é a capacidade de usar componentes. Você pode pensar em um componente como um bloco de construção para a nossa aplicação. Nós os usamos para dividir nosso código em partes menores e mais sustentáveis. Um componente também pode ser reutilizado várias vezes, do seu aplicativo para evitar a repetição de código. Manter seções de código em componentes autônomos também ajuda a depurar e manter nosso código mais organizado e mantido. Vamos dar uma olhada em como os componentes podem ser aplicados ao nosso projeto. Este é o nosso pedido de cartão acabado. Podemos ver que há algumas áreas que se repetem. Temos os campos de entrada de texto no lado esquerdo, e todos os três são exatamente os mesmos. O mesmo se aplica a um cartão em si onde o texto é exibido. Este é um caso de uso ideal para usar componentes. Nós já sabemos ao explorar os arquivos em nosso aplicativo que há um wrapper principal chamado o arquivo app.vue. Sabemos que podemos usar este wrapper para conter o resto do nosso aplicativo, que pode ser aninhado dentro. Dentro deste wrapper app.vue, podemos começar a criar mais componentes, como um cabeçalho. Este cabeçalho será colocado dentro de seu próprio modelo de arquivo único, como o arquivo app.vue. Ao nomear arquivos componentes, é melhor ser o mais descritivo possível. Isso ajuda na criação de aplicativos de maior escala com muitos componentes. Podemos ver claramente onde os componentes se encaixam. Neste projeto eu chamei este arquivo de header.vue. Também coloquei o rodapé em um arquivo rodapé.vue. Ambos os arquivos de cabeçalho e rodapé são chamados de dentro do wrapper principal. No caso deste aplicativo, não é essencial ter o cabeçalho e rodapé em componentes separados. Poderíamos ter codificado manualmente dentro do nosso modelo app.vue, já que só vamos usá-los uma vez. No entanto, isso nos dá mais prática na criação de componentes. Ainda dentro do app.vue principal, temos a seção principal do corpo controlada por um componente wrapper. Para cada lado do cartão, temos a frente do cartão. Cartão dentro da esquerda, cartão dentro da direita, e o verso do cartão. Alternamos entre esses componentes usando os links de navegação, dentro do cabeçalho. Esses componentes atuarão como um contêiner pai para todos os componentes filho dentro deles, como componentes de texto e imagem. Como componente pai, isso será usado para passar dados entre componentes que cobriremos em breve. Isso agora nos deixa com os componentes reutilizáveis. À esquerda há área para editar o cartão, e nesta seção particular, a frente do cartão tem áreas de entrada de texto livre, dentro de um arquivo chamado text-input.vue. A natureza dos componentes significa que só temos que criar este componente uma vez e então podemos adicionar isso quantas vezes quisermos. O texto inserido nessas áreas de texto é exibido dentro das áreas de saída de texto no lado direito. Lembre-se de como falamos ao usar propriedades de dados em componentes, que a propriedade de dados deve ser uma função. Bem, é aqui que entra a importância disto. Se nunca tivéssemos dados como uma função, como fizemos no primeiro projeto, quando qualquer uma das entradas de texto foi editada. Todas as três saídas de texto à direita serão atualizadas com o mesmo texto. Evidentemente que isso não funcionaria bem em todo o caso, porque queremos que as áreas de texto livre sejam independentes. Eles podem compartilhar o mesmo modelo visualmente, mas queremos que os dados não sejam compartilhados com outras pessoas. Ter conjuntos de dados funcionam como função, permite que os componentes mantenham seu próprio estado, para que possam trabalhar de forma independente. Nós também fazemos o mesmo para as imagens também, existem dois componentes. Um para a área de upload da imagem e, em seguida, um à direita para exibir a imagem. Passando para a parte de trás do cartão que simplesmente tem os mesmos dois componentes de imagem porque eles agora são reutilizáveis. Em seguida, apenas o texto de direitos autorais abaixo. É assim que os componentes funcionam e como podemos reutilizá-los várias vezes. Dividir nosso aplicativo assim é possível com ferramentas como o webpack, que agrupa todos esses módulos, os arquivos e todas as suas dependências em um único arquivo de conta para produção. Esperemos que agora você possa ver os benefícios do uso de componentes. Agora vamos passar a colocá-los em prática. 45. Registrando componentes globais: Agora temos uma melhor compreensão de quais componentes são e como vamos dividir nossa aplicação nesses componentes. Vamos começar a trabalhar na criação deles. Se o seu projeto ainda não estiver em execução, você precisará ir até o terminal e executar npm, executar dev e eles devem abrir o servidor de desenvolvimento no navegador. Vemos nesta página e tudo está funcionando bem. Para começar, vamos limpar o código de exemplo no arquivo app.vue. Vá para app.vue. A primeira coisa que queremos fazer é remover todo o código entre as tags template. Então tudo, desde a div com o ID do aplicativo, até a tag de fechamento do modelo. Então remova isso. O mesmo para o conteúdo do script e também para os estilos, bem outros estilos próprios e script em quando precisamos deles. Este é o nosso modelo de arquivo único vazio. Então eu vou adicionar alguma estrutura HTML simples para o aplicativo. Lembre-se que este arquivo app.vue acabará sendo o wrapper principal do nosso aplicativo. Portanto, faça sentido adicionar nossos contêineres e linhas de bootstrap aqui dentro. Os modelos também precisam ter um dos principais elementos externos, modo que todo o recipiente bootstrap irá cobrir isso. Por exemplo, isso não funcionará, se adicionarmos algum HTML, como uma tag de imagem e, em seguida, um segundo elementos, como tag API. Se salvarmos isso e depois passar para o navegador, vemos que temos uma tela em branco. Se entrarmos nas ferramentas de desenvolvedor e, em seguida, abrir o console, vemos que recebemos uma mensagem dizendo componentes modelo deve conter exatamente um elemento raiz. Para corrigir isso, podemos usar um div, por exemplo, como um elemento raiz para cercar nosso código. Vamos adicionar uma div dentro aqui e colar a tag de fechamento na parte inferior e, em seguida, “Salvar” e agora, quando atualizamos, vemos as mensagens de erro desapareceram e agora temos nossa mensagem de saudação. Vamos continuar a adicionar nossas linhas bootstrap. Podemos remover os textos e também a tag imagem e, em seguida, continuar criando uma classe, uma classe bootstrap de recipiente. Então aqui podemos criar nossa linha. Então classe bootstrap de linha que irá cercar todo o conteúdo que vamos adicionar dentro. Finalmente, uma terceira e última div para a seção, que vai ter uma classe de col-sm-12. Você faria o vue aplicativo completo 12 colunas de largura. Para isso funcionar, precisamos pegar o bootstrap para o link CDN. Se passarmos para o navegador, então uma vez que você Google e, em seguida, fazer a pesquisa bootstrap para CDN e, em seguida, rolar para baixo. Podemos ver sob o título de download temos o salto para a seção CDN bootstrap. Nós não precisamos do JavaScript agora, então eu vou apenas copiar o link CSS, que é a linha superior. Copie isso e então podemos adicionar isso em nossa página de índice logo abaixo do título. Então dê a isso um “Salvar” e então podemos dar uma olhada no uso de componentes globais. Este é o primeiro tipo de componente que eu vou mostrar e isso significa que o componente não está restrito para ser usado apenas em uma instância ou componentes específicos. Podemos basicamente ter acesso a qualquer lugar onde precisarmos. Se formos para o arquivo main.js, podemos começar a trabalhar em nosso primeiro componente logo acima da instância vue. Certifique-se de que o componente está acima disso, pois precisamos registrá-lo antes que a instância do vue seja instanciada, para que ele funcione corretamente. Nós registramos este componente global chamando vue.components dentro aqui, então damos aos componentes um nome de tag dentro de uma string. Este é um nome que costumava se referir aos componentes. Vou chamar isso de entrada de texto. Os formatos de nome de letras minúsculas separados por hífens são considerados boas práticas, embora não essenciais, depois separados por uma vírgula e dentro de chaves, passamos as opções, assim como uma instância normal do vue. Vamos começar criando um modelo e este modelo dentro de uma string vai conter uma única área de texto. Vamos sair nosso HTML aqui dentro. A marca de abertura e fechamento da área de texto. Para que isso funcione corretamente, precisamos ter certeza de criar a biblioteca vue JS importada corretamente, que já fazemos no topo da página com a exibição de importação da vista. Se importarmos módulo da pasta de módulos nó logo aqui, podemos apenas referi-lo pelo nome do módulo, como vue. Se foram importar qualquer outra coisa que não está na pasta módulos nó, precisamos especificar o caminho do arquivo para o arquivo, como você pode ver com a importação para cima na linha dois e, em seguida, salvar isso. Então todo o no arquivo index.html, agora podemos adicionar o componente ao nosso div app principal, assim como um elementos HTML. Para localizar nossa div com o id do aplicativo e, em seguida, dentro aqui, eu vou adicioná-lo como um elemento normal, então texto, entradas, tag de abertura e, em seguida, nossa tag de fechamento. Observe que este nome de elemento deve marchar o nome da tag de componentes, que será apenas antes de dentro dos componentes vue. Estes são componentes reutilizáveis e podemos adicioná-los quantas vezes quisermos, por isso, se fôssemos copiar e colar isto em mais algumas vezes, devemos ser capazes de ver três componentes. Se salvarmos isso e depois passar para o navegador, devemos ver três componentes de área de texto, mas vemos apenas uma tela em branco. Isso é por causa de main.js. Nossa instância vue está substituindo o conteúdo, renderizando o conteúdo do nosso arquivo app.vue. Este comportamento é normalmente o que queremos, mas para este exemplo, vou comentar a função de renderização para que possamos ver nossos componentes. Então, há comentários fora da seção e, em seguida, agora, se atualizarmos, vemos nossas três áreas de texto aparecem na tela. Também porque eles são registrados globalmente, podemos adicioná-los aos modelos vue dentro de nosso aplicativo. Da mesma forma com nossos elementos HTML, nosso objeto de opções dentro do componente vue, não se limita apenas a adicionar um modelo de string como estamos usando atualmente, podemos de fato usar outras opções que temos disponíveis para nós no instância vue, como adicionar dados e métodos. Sabemos a partir da última seção usando a propriedade de dados em componentes, é um pouco diferente. Precisamos adicioná-lo como uma função. Vamos adicionar alguns dados para alterar o texto do espaço reservado da área de texto. Primeiro de tudo, vamos vincular o espaço reservado, a uma propriedade de data ou valor de texto. Em seguida, em um [inaudível] no final de nossos modelos para adicionar nossa propriedade de dados. Esta é uma função como sabemos, que então leva em um objeto e, em seguida, retornamos um objeto contendo nossos dados. Vamos criar nosso valor de texto, propriedade de data e definir isso como uma string, apenas do tipo aqui. Salve isso e agora devemos ver o valor do tipo aqui dentro das três áreas de texto. Além disso, podemos adicionar métodos para alterações texto de espaço reservado quando clicamos nele. Então, apenas abaixo da seção de dados, adicione uma vírgula e então podemos adicionar nossos métodos. Métodos adicionados exatamente o mesmo que já sabemos. Eu vou adicionar um método chamado alterar texto e, em seguida, tudo o que eu quero que este método faça é selecionar este valor de texto, que é este dado que nós definimos aqui e nós estamos apenas indo para defini-lo para uma nova cadeia de textos alterados. Para acionar este método, precisamos adicionar um ouvinte clique na área de texto, que qualquer tag de abertura, podemos adicionar a abreviação de no clique e , em seguida, usá-lo para acionar a função de alterar texto. Vamos guardar isso. Se verificarmos isso no navegador, você notará que os três componentes atuarão de forma independente, então, se clicarmos no primeiro, veremos o texto alterado. Para o texto dentro do segundo e terceiro componente é exatamente como era antes. É assim que podemos adicionar componentes ao nosso aplicativo globalmente e agora podemos passar para o próximo vídeo e dar uma olhada no registro de componentes localmente. 46. Registrando componentes locais: No último vídeo, aprendemos como criar um componente que você deseja disponibilizar globalmente em todo o nosso aplicativo. Agora, vamos analisar como podemos registrar um componente local, que só está disponível no escopo de instâncias ou componentes. Primeiro, vou remover o componente global do último vídeo. Então, se você passar para o main.js e este componente que registramos, eu vou remover esta seção completa e nós também podemos remover os componentes de entrada de imposto livre de dentro do index.html. Então remova todos os três elementos de entrada de texto e, em seguida, salve isso. Eu vou substituir este componente global por dois componentes simples separados, que irá apenas exibir algum texto do componente 1 e também componente 2. De volta ao main.js, os componentes locais são criados de forma diferente dos componentes globais. Ainda precisamos criar nosso objeto de opções, mas desta vez, precisamos armazená-lo dentro de uma variável assim. Vamos adicionar nossa variável chamada component1 e definir isso para um objeto, e então uma vez que eu adicionar um modelo simples, que vai ser algumas tags p para produzir algum texto do component1 e, em seguida, fechar a tag p off e, em seguida, eu vou fazer o mesmo com um segundo componente. Novamente, isso precisa ser uma variável como chamamos component2 com oito modelos e essa string também vai ser tags p com o texto do component2 assim. Na parte inferior, ainda podemos deixar a função de renderização comentou Alpha agora, já que não estamos trabalhando com o arquivo app.vue ainda. Sobre o index.html, em seguida, entre o aplicativo, podemos adicionar nosso component1, a tag de fechamento, e então também podemos fazer o mesmo para o nosso component2. Vamos copiar isso e adicionar isso abaixo. Altere isso para ser os segundos componentes e, em seguida, salve. Agora, se formos para o navegador e, em seguida, atualizar, vemos que há um problema. Vamos abrir o console e ver o que está acontecendo. Na guia console, e vemos duas mensagens de aviso vermelhas, que tem uma mensagem de elementos personalizados desconhecidos para component1 e também component2. Isso nos dá uma dica do que fizemos de errado. Diz: “Você registrou o componente corretamente?” Isto porque, como componentes locais, precisamos registrá-los onde queremos que estejam disponíveis. Vamos para a instância de exibição no arquivo main.js e, em seguida, registrar os componentes que você deseja usar. Vamos fazer isso logo abaixo da propriedade L. Podemos adicionar a nossa opção de componentes e este é um objeto. Então, podemos começar com o nome da string do component1. Este é o nome que damos ao componente e, em seguida, separados por dois pontos. Nós somos o verdadeiro nome dos componentes. Então é component1. Se formos para o navegador e, em seguida, atualizar, ainda vemos as mensagens de erro. Isso ocorre porque demos a este nome component-1 um alias com um hífen no meio. Então vamos adicionar este hífen para os primeiros componentes e agora devemos ver o primeiro componente é exibido na tela. O aviso acabou e o console agora mostra apenas que component2 é desconhecido. Agora, vamos fazer o mesmo component2. No main.js, podemos adicionar uma vírgula e, em seguida, adicionar nosso nome e isso vai ser component2 e isso pode ser qualquer nome que queremos usar. O segundo foi coincidir com o nome real do componente, porém, que é o nome da variável que lhe demos. Component2 irá adicionar o hífen dentro da página de índice e, em seguida agora devemos dar uma atualização e vemos ambos os componentes na tela. Então é assim que usar componentes localmente e como torná-los disponíveis em um escopo específico. Em seguida, vamos começar a construir nosso aplicativo com componentes de arquivo único. Estes são os componentes contidos em seu próprio arquivo, como o app.vue e vamos dar uma olhada neles em seguida. 47. Criando componentes de arquivo único: Nos últimos vídeos que procuramos estão registrando componentes globalmente e localmente. Aqui vamos olhar para uma maneira diferente de usar componentes, criando-os em seu próprio arquivo único. Na verdade, para recriar no projeto completo desta maneira. Componentes de arquivo único permite ter tudo relacionado aos componentes em um só lugar. É um ótimo [inaudível] criar um componente usando VUE.Component. O arquivo App of Vue é um único componente de arquivo também. Assim como este, temos uma seção para criar nosso modelo em HTML. Faz com quaisquer dados de exibição, como chaves duplas ou um evento. Este modelo também é muito mais fácil de trabalhar do que usar um único modelo de string. Como se tivéssemos olhado até agora. Nós também temos a seção de script acima de qualquer lógica relacionada ao Vue GIS, como dados e métodos, juntamente com qualquer JavaScript Vanilla que possamos querer adicionar. Em seguida, na parte inferior, nós também temos nossos estilos. Também podemos especificar se os estilos são globais, ou se eles só se aplicam a este componente. Temos essa flexibilidade, então, antes de começar, podemos excluir o componente do último vídeo. Vamos deixar o componente 1 e o componente 2. Em seguida, não foi possível remover a seção do componente da instância do vue. Vamos usar o arquivo app.vue como nosso wrapper principal. Isso é os próprios comentários fora da função de renderização. Então, finalmente, na página de índice, vamos remover os elementos do componente 1 e 2. Para começar, quero adicionar uma pasta de componentes dentro da pasta de origem. Selecione uma nova pasta chamada componentes. Certifique-se de que isto está logo abaixo da pasta de origem. Dentro da pasta de componentes, vou criar um novo arquivo. Este arquivo será chamado Header.vue. Nós também podemos criar subpastas para nossos componentes, o que é uma boa idéia para grandes aplicativos para manter as coisas mais organizadas. Este arquivo de cabeçalho será um componente simples. Vamos nos acostumar a construí-los dentro do nosso aplicativo. Vamos começar. Se você abrir o arquivo Header.vue, podemos adicionar a estrutura básica. Assim como em nosso arquivo app.vue. Vamos começar criando o modelo. Isso precisa da tag de abertura e fechamento. Em seguida, podemos adicionar nossas tags de script e, finalmente, na parte inferior, podemos perguntar as tags de estilo. Agora, dentro da seção de modelos na parte superior, vou começar adicionando um menu para o nosso aplicativo. Se você se lembrar de antes que precisamos ter uma div circundante, ou um elementos circundantes para nossos modelos. Então dentro daqui eu vou adicionar um título de nível 1, que vai ser o título de cartas criativas. Vamos adicionar uma classe bootstrap de centro de texto. Então, sob este título, podemos começar a criar nossa lista de ordem ul, que será o nosso menu.ou um elementos circundantes para os nossos modelos. Então dentro daqui eu vou adicionar um título de nível 1, que vai ser o título de cartas criativas. Vamos adicionar uma classe bootstrap de centro de texto. Então, sob este título, podemos começar a criar nossa lista de ordem ul, que será o nosso menu, ou um elemento circundante para os nossos modelos. Então dentro daqui eu vou adicionar um título de nível 1, que vai ser o título de cartas criativas. Vamos adicionar uma classe bootstrap de centro de texto. Então, sob este título, podemos começar a criar nossa lista de pedidos ul, que será o nosso menu. [ inaudível] Bem também pode ter uma classe Bootstrap, e este vai ser nav, então justificar-content-center. Em seguida, atribua ul itens da lista de pedidos Itens de lista têm uma classe Bootstrap também de item nav. O primeiro link que vou adicionar é para a frente do cartão. Em seguida, exibir o [inaudível] indo para copiar este item de lista e, em seguida, colar em três vezes mais. O segundo link está dentro da esquerda. Este é o interior esquerdo do nosso cartão. Em seguida, dentro da direita, e, finalmente, o quarto link é para a parte de trás do cartão. Isso funcionará perfeitamente sem nenhum dos scripts, ou qualquer uma das seções de estilo adicionadas. Nenhum consentimento destes é necessário para que os componentes funcionem. Se passarmos para o navegador e, em seguida, atualizar, ainda podemos ver que nenhum cabeçalho é visível. Isto deve-se ao facto de termos de dar alguns passos em primeiro lugar. Sabemos que o arquivo app.vue é um wrapper principal. Precisamos dizer a este arquivo App que queremos usar os componentes de cabeçalho. Dentro das tags de script de app.vue, podemos começar adicionando uma instrução de impulso. O que queremos fazer é importar o cabeçalho, e este é o alias que damos ao componente. Este nome depende de nós. Em seguida, queremos importá-lo a partir do caminho do arquivo, então usamo./, e, em seguida, ir para dentro da pasta de componentes. O arquivo é chamado Header.vue. Este é o nosso arquivo de cabeçalho importado. Então, como olhamos no vídeo de componentes locais, precisamos registrar o componente para que ele esteja disponível para uso dentro deste modelo. Em seguida, adicionamos nossos padrões de exportação, que irá conter todos os nossos dados vue. Em seguida, podemos registrar nossos componentes exatamente como fizemos no vídeo de componentes locais. Nós adicionamos navHeader, é o header.There algumas coisas para saber aqui dentro da propriedade components. O primeiro nome à esquerda é o nome da marca. Isso pode ser nomeado qualquer coisa que você quiser, e é como referenciar nossos componentes. O nome à direita, muito mais o nome dado das instruções de importação logo acima. Podemos então adicionar os componentes em nosso modelo usando o nome da tag que demos todos NavHeader. Como falamos no início desta seção. Mesmo que o nome que demos ao componente seja CamelCase, é melhor prática adicionar o nome do elemento como minúsculo dentro do modelo. Se formos até o nosso modelo, podemos adicionar o nosso NavHeader em minúsculas separadas por hífens e, em seguida, fechar isso fora. Agora podemos testar isso no navegador. Se o seu aplicativo não estiver em execução, certifique-se de qual executar o npm run dev no terminal primeiro. Então, se formos para o navegador, agora vemos que temos o título principal de cartões criativos, e também os links de navegação. O título está amarrado contra o topo da página. Poderíamos consertar isso com um pouco de CSS simples. Se voltarmos para o arquivo header.vue e, em seguida, descer para as tags de estilo. Tudo o que precisamos fazer é adicionar nosso estilo para o H1, e apenas adicionar um pouco de Margin-top.We vamos adicionar 10 pixels para lá. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos.and basta adicionar um pouco de Margin-top.We vamos adicionar 10 pixels para lá. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos.and basta adicionar um pouco de Margin-top.We vamos adicionar 10 pixels para lá. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos.Agora podemos ver que é empurrado para fora do topo apenas o suficiente.É como podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos.e apenas adicionar um pouco de margin-top. Vamos adicionar 10 pixels para lá. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos.and basta adicionar um pouco de Margin-top.We vamos adicionar 10 pixels para lá. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos, e apenas adicionar um pouco de Margin-top.We vai adicionar 10 pixels para lá. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos.e apenas adicionar um pouco de margin-top. Vamos adicionar 10 pixels para lá. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos.and basta adicionar um pouco de Margin-top.We vamos adicionar 10 pixels para lá. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos.and basta adicionar um pouco de Margin-top.We vamos adicionar 10 pixels para lá. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos.and basta adicionar um pouco de Margin-top.We vamos adicionar 10 pixels para lá. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos.and basta adicionar um pouco de Margin-top.We vamos adicionar 10 pixels para lá. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos.Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos.. Este é o nosso arquivo de cabeçalho importado. Então, como olhamos no vídeo de componentes locais, precisamos registrar o componente para que ele esteja disponível para uso dentro deste modelo. Em seguida, adicionamos nossos padrões de exportação, que irá conter todos os nossos dados vue. Em seguida, podemos registrar nossos componentes exatamente como fizemos no vídeo de componentes locais. Nós adicionamos navHeader, é o header.There algumas coisas para saber aqui dentro da propriedade components. O primeiro nome à esquerda é o nome da marca. Isso pode ser nomeado qualquer coisa que você quiser, e é como referenciar nossos componentes. O nome à direita, muito mais o nome dado das instruções de importação logo acima. Podemos então adicionar os componentes em nosso modelo usando o nome da tag que demos todos NavHeader. Como falamos no início desta seção. Mesmo que o nome que demos ao componente seja CamelCase, é melhor prática adicionar o nome do elemento como minúsculo dentro do modelo. Se formos até o nosso modelo, podemos adicionar o nosso NavHeader em minúsculas separadas por hífens e, em seguida, fechar isso fora. Agora podemos testar isso no navegador. Se o seu aplicativo não estiver em execução, certifique-se de qual executar o npm run dev no terminal primeiro. Então, se formos para o navegador, agora vemos que temos o título principal de cartões criativos, e também os links de navegação. O título está amarrado contra o topo da página. Poderíamos consertar isso com um pouco de CSS simples. Se voltarmos para o arquivo header.vue e, em seguida, descer para as tags de estilo. Tudo o que precisamos fazer é adicionar nosso estilo para o H1, e apenas adicionar um pouco de margin-top. Vamos adicionar 10 pixels para lá. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos, e apenas adicionar um pouco de Margin-top.We vai adicionar 10 pixels para lá. Agora podemos ver que é empurrado para fora do topo apenas o suficiente. É assim que podemos usar componentes de uma única página. O cabeçalho é bastante simples. Vamos adicionar mais a isso nos próximos vídeos. 48. Adicionando o componente frontal de cartão: Agora sabemos como criar e exibir componentes de arquivo único. Agora podemos seguir em frente e realmente colocar nosso projeto em movimento. Eu vou para o nosso projeto e organizar a pasta de componentes adicionando uma sub-pasta chamada cartão. Em seguida, dentro desta pasta de cartão, eu vou criar um novo arquivo chamado CardFront com a extensão de visualização. Se você se lembrar dos slides no início desta seção, vamos ter um único componente de arquivo para cada lado do cartão. Será o CardFront, CardBack, e ambos o interior, esquerda e direita. Estes componentes vão agir como rappers onde você pode soltar os componentes de texto e imagem onde quer que eles queiramos. Elas também são as seções que trocarão para alterar as exibições quando um link de menu é clicado. Mas mais sobre isso em alguns vídeos embora. Mude a ortografia lá. Se voltarmos para o cardfront.vue, isso é configurado como antes com um modelo, então as tags de abertura e fechamento lá, e depois seguido pelas tags de script e, finalmente, as tags de estilo. Dentro do modelo, lembre-se que precisaremos de uma div circundante. Vamos adicionar isso lá dentro. Você também pode fazer esta div uma linha bootstrap adicionando a classe de linha dentro de lá. Então precisamos adicionar algumas colunas bootstrap, seis à esquerda e também seis à direita. Vamos criar a seção esquerda para começar. Podemos adicionar as classes bootstrap de col sm 6. Esta será metade da largura da página. Nós também adicionaremos uma classe bootstrap de cartão e, em seguida, uma classe CSS personalizada da área de edições. Vamos usar isso em apenas um momento para estilizar as seções. Copie esta div esquerda e, em seguida, colá-lo logo abaixo, mas ainda seria dentro desta linha. Tudo o que precisamos fazer é adicionar nossa classe personalizada neste momento de exibição de cartão. Uma vez que você tem isso no lugar, podemos ir até as tags de estilo e, novamente, alterar esses estilos personalizados. Comece com a área de edições, que é um lado esquerdo do cartão. Vamos dar a isso uma cor de fundo, uma cor personalizada de d2f9f9, e então também algum preenchimento de 20 pixels. Em seguida, para dar ao cartão alguma altura, vamos adicionar a propriedade CSS high de 800 pixels. É o editor à esquerda. O lado direito é a seção de exibição do cartão. Vamos adicionar alguns estilos para esta seção. Tudo o que vamos fazer aqui é igualar a altura de 800 pixels, e então também manter o preenchimento consistente com 20 pixels lá. Como sempre, este componente não será exibido ainda. Para que isso funcione, precisamos registrar e também importá-lo dentro do arquivo em que você deseja usá-lo. Todos os nossos componentes que são os filhos de app.vue, então nós registramos e importamos dentro de lá, assim como fizemos com o cabeçalho. Se você se sentir confiante ao dar uma chance, vá em frente e pause o vídeo e dê um jeito. Se você precisa de uma pista, basta seguir com os mesmos passos que fizemos para registrar o arquivo Header.vue. Caso contrário, não se preocupe, e me acompanhe. Dentro do app.vue, vamos em frente e adicionar as instruções de importação. Desta vez, precisamos importar o CardFront. No entanto, este é um nome até nós, mas eu vou chamá-lo de CardFront para mantê-lo descritivo. CardFront de e, em seguida, o caminho do arquivo é barra ponto, vai para a pasta componentes. Lembre-se, desta vez, temos a pasta de cartões dentro dos componentes. Certifique-se de adicionar isso aí. O nome do arquivo é CardFront. Com isso registrado, agora podemos rolar para baixo e, em seguida, adicionar isso à nossa seção de componentes. Vou chamá-lo de CardFront. Lembre-se, esse nome também é opcional para aquele à direita do CardFront deve corresponder à instrução de importação acima. A última coisa a fazer é adicionar este arquivo dentro do nosso template, então apenas abaixo do cabeçalho nav. Vamos adicionar os componentes frontais da placa. Isso significa que app.vue é um pai de ambos o cabeçalho e também o cartão de componentes. Isto é tudo o que precisamos fazer agora para ir até o navegador e espero ver nosso componente exibido. Temos a área de edição no lado esquerdo com os fundos azuis. Também temos a seção de exibição do cartão no lado direito. Se você não vir isso em execução e tiver apenas uma página em branco, você pode ter um erro, então verifique dentro do console. Você também pode precisar reiniciar o servidor de desenvolvimento. Se você precisar fazer isso, eu vou pressionar Control C para fechá-lo e, em seguida, executar npm run dev, e então ele deve estar de volta para cima e em execução. Finalmente, apenas para terminar esta seção fora, eu tenho alguns estilos básicos para aplicar ao aplicativo dentro do arquivo App.vue. Volte para app.vue e role para baixo até a seção de estilo. A primeira coisa que queremos fazer é adicionar alguns estilos ao corpo. Vou mudar a família de fontes para Verdana Genebra, e finalmente, um sans-serif genérico como a queda de volta. Adicione uma cor de texto para ser o valor de 333. Então, se atualizarmos, devemos ver agora que as fontes personalizadas entraram em vigor. Então, finalmente, eu quero mudar esses itens de menu em links. Se formos para o cabeçalho e, em seguida, dentro do item da lista, podemos apenas adicionar nossas tags a-dentro de lá, com uma classe bootstrap de link nav, e depois fechar o a-tag. Eu só vou copiar isso, e colá-lo na frente do segundo, terceiro e quarto item. Faça o mesmo para a marca de fechamento, cole-os e salve e, em seguida, atualize. Em seguida, podemos mudar o cursor para ser um ponteiro enquanto ele passa o mouse sobre. Os estilos finais são para os a-tags. Este vai ser o cursor, este vai ser o tipo de ponteiro, e então salvar isso. Agora, vamos ver se passarmos pelos links de navegação, agora temos o ponteiro. Agora isso parece um pouco melhor. Felizmente, agora você deve estar pegando o jeito de adicionar componentes. Caso contrário, não se preocupe, ainda temos muito mais para criar é app. Temos muito mais prática à medida que você passa pelo curso. Em seguida, vamos dar uma olhada em como podemos passar dados de um filho para um componente pai. 49. Emitir dados aos componentes pai: Agora vamos dar uma olhada na passagem de dados entre componentes, mais especificamente dados de um filho para um componente pai. Primeiro, precisamos entender a relação pai-filho com os componentes. App.vue é o wrapper principal, e todo o conteúdo está contido dentro dele. Está efetivamente no nível superior. Isso significa que todos os componentes que adicionamos aqui dentro, como o nav-header e as frentes de cartão. São todos componentes filho deste arquivo app.vue. Também em breve neste projeto vamos criar um componente de entrada de texto, e quando fazemos isso dentro do cartão do arquivo, nós também vamos adicionar um componente exatamente como este. Depois de criá-lo, também adicionaremos as entradas de texto como fizemos antes. Nosso cartão de componentes dot-vue, agora é aparente para este texto entradas. Uma entrada de texto é os componentes filho. Agora vamos passar dados do nosso arquivo de cabeçalho para o app.vue. Com esse conhecimento, agora sabemos que isso está passando dados do filho para os componentes pai. Podemos fazer isso com o que chamamos de eventos personalizados. Se passarmos para o arquivo de cabeçalho dot vue, queremos passar para o arquivo pai, que é app.vue qual página do menu foi selecionada. Queremos fazer isso, então app.vue sabe qual componente exibir, como a frente do cartão ou a parte de trás. A primeira coisa que queremos fazer é criar uma propriedade de dados para manter o controle da página selecionada. Vamos adicionar o nosso padrão de exportação, e eu quero criar a propriedade de dados que se lembram, esta é uma função quando usar componentes swayed. Vou retornar o nome da propriedade de dados da página selecionada. Para começar, isso vai ser uma string vazia. Agora podemos configurar um listener clique em cada um dos links no menu para alterar o valor da página selecionada. Volte para os modelos e dentro dos links, vá para adicionar um novo atributo de arte clique. Quando isso é clicado, vamos definir página, selecioná-lo para ser igual a uma cadeia de frentes de cartão. Uma vez clicado, a pá selecionada não será mais uma string vazia. Ele será substituído por este valor de texto de frentes de cartão, e então precisamos fazer o mesmo para os links livres sobre. Copie o listener de clique e cole. Desta vez, isto vai ser cartão dentro da esquerda. O terceiro é para o cartão dentro da direita. Então o último será para o verso do cartão. O componente que vamos chamar é o verso do cartão. Até agora só criamos os componentes frontais da placa, mas criaremos o over em breve. Também os nomes que adicionamos aqui, principalmente os nomes de componentes que demos a eles quando os registramos para que isso funcione corretamente, como as frentes de cartão que você adicionou em app.vue. De volta ao cabeçalho, vou agora criar um observador. Isso vai observar quaisquer alterações nos dados da página selecionada, seja, quando selecionamos um novo manualmente. Volte para o script, e logo abaixo da propriedade data, você pode adicionar uma vírgula e, em seguida, criar nossa seção de observação e, em seguida, criar nossas propriedades de observação. Então, queremos assistir a página selecionada dados. Quando a página selecionada é alterada, ela irá então acionar uma função. Dentro desta função, vamos emitir um evento personalizado para os pais. Isto é realmente mais simples do que parece, só precisamos usar este sinal de dólar ponto emitir. No início do curso, olhamos para os refs, e nós os acessamos usando a propriedade de visão nativa do símbolo de dólar refs. Bem, usando sinal de dólar emit também é nativo para a instância view. É um método de instância nativa, o que significa que é incorporado na instância view. Então passamos em dois argumentos. O primeiro é o nome do evento, que é escolhido bios, então eu vou chamá-lo, página foi alterada, e separá-lo por vírgula. O segundo é quais dados queremos passar aos pais. Queremos enviar o nome da página que foi clicado, e podemos acessar isso com esta página de ponto selecionada, que é o valor desta propriedade de dados. Esta é a primeira parte do envio dos dados. O segundo é sobre os pais, que é app.vue. Guarde isso e vá para app.vue. Se voltarmos para o nosso modelo e procurar a seção de cabeçalho nav, que é um componente char. Aqui precisamos ouvir os eventos que criamos dentro dos elementos componentes, então, assim como este, podemos adicionar um V em. Então vamos ouvir o evento que você deu um nome de página foi alterado, ou podemos até mesmo usar a abreviação, que era o símbolo at. Agora estamos ouvindo eventos a serem passados , então precisamos dizer a vista o que fazer com este evento. Obtemos a página selecionada, selecione criar nova propriedade de dados para armazenar este evento valorizando quando há uma alteração, rolando para baixo até o script logo abaixo do padrão de exportação. Eu também vou adicionar a propriedade de dados dentro daqui, não se esqueça de adicionar a vírgula. Vou criar uma nova propriedade da página atual. Vou definir isso igual a frentes de cartas. Até agora só temos o componente frontal da placa classificada. Isso é bom porque faz sentido ter a frente do cartão exibida por padrão de qualquer maneira. Isso agora nos permite definir a página atual para o valor dos eventos como este. Para que a página atual seja igual ao evento cifrão. Agora, cada vez que o link de navegação é clicado, isso é então passado para os componentes pai com os eventos chamados página foi alterado. Em seguida, alteramos a página atual da frente do cartão para o valor dos eventos. Podemos testar isso está funcionando bem, produzindo o valor da página atual com as chaves duplas. Logo após o cabeçalho de navegação. Vou abrir as chaves duplas e exibir o valor da página atual, então salve isso. Agora podemos ir para o navegador. Primeiro, queremos parar o servidor de desenvolvimento com npm run dev. Agora vemos o valor das frentes de cartão, que é o que esperamos porque este é um valor padrão. Se selecionarmos um link nav diferente, vemos agora que o valor é alterado cada vez que selecionamos um novo item de menu. Se você vir o valor da página, selecione a alteração, quando você clicar em um link de menu, isso significa que você está emitindo dados com êxito de um componente filho para componentes pai. Caso contrário, basta verificar todo o código até que ele chegue ao palco, e então estamos prontos para avançar para criar o resto dos componentes da placa. Também usando componentes dinâmicos para alternar entre cada exibição. 50. Componentes dinâmicos: Neste aplicativo, queremos criar componentes para exibir os diferentes lados do nosso cartão, como a frente e a parte de trás. Também queremos alternar entre esses componentes. Quando um usuário clica nos links do menu. uso de Componentes Dinâmicos nos permite alcançar esse efeito. Podemos alternar entre vários componentes e colocá-los nos mesmos pontos de montagem. Tudo o que precisamos fazer é usar os Elementos do Componente de Reserva. Ele pode ir no lugar dos componentes frontais da placa. Então, se passarmos para o app.vue, você continuará esta saída da página atual, então vamos começar. Então, se excluirmos a frente do cartão e substituí-la por componentes, verifique se isso está nas tags de abertura e fechamento. Então agora, em vez de renderizar a frente da placa, os elementos componentes renderizarão qualquer seção em que clicarmos. Então, já mantendo o controle da página selecionada usando os dados da página da coluna. Agora podemos usar os atributos de atenuação para vincular dinamicamente os dados da página atual a esses novos elementos de componente. Então, dentro da tag de abertura, podemos usar a diretiva v-bind e, em seguida, vincula os atributos de is. Dentro daqui podemos adicionar a propriedade data da Página Atual. Lembre-se que também podemos usar a sintaxe abreviada, que é apenas os dois pontos. Agora, cada vez que uma página é clicada no menu, os dados são passados para os componentes do arquivo app.vue pais e ouve esse evento incrível e, em seguida, atualiza os dados da página atual. Em seguida, os elementos do componente alteram o componente exibido. Baseado nisso. Podemos ver isso em ação no navegador. Se guardarmos isso e depois atualizarmos. Agora, se clicarmos na frente, isso é bom porque temos o componente frontal cartão disponível. No entanto, se selecionarmos qualquer uma das outras três seções, você verá uma página em branco. Então isso é bom, isso significa que tudo está funcionando. O resto desses links vai funcionar a partir de um criar, o resto dos componentes do cartão. Faremos isso no próximo vídeo. 51. Criando os componentes adicionais de cartão: Estamos fazendo um bom progresso com nosso conhecimento de como os componentes funcionam. Neste vídeo, eu quero criar os componentes adicionais do cartão. Nós já temos o cartão de componentes, mas ainda precisamos criar o CardInSideLeft, dentro da direita, e também os arquivos CardBack. Se você se sentir confiante em fazer isso, sinta-se livre para ir em frente e criar esses componentes de arquivo único sozinho. Por enquanto, o conteúdo só precisa ser o mesmo que o arquivo Cardfront.vue. Você pode copiar isso para começar. Além disso, você precisará importá-los para o arquivo App.vue e, em seguida, registrá-los como componentes. Certifique-se de que quando registramos os componentes, nós os nomeamos o mesmo que lhes demos na navegação do menu ou no arquivo Header.vue. Caso contrário, eles não serão vinculados à página correta. Para começar, vou para o arquivo Cardfront.vue, selecionar tudo, e depois copiar, e então se formos para o nosso menu, à esquerda, e depois dentro da pasta do cartão, eu vou criar um novo arquivo, e este será chamado CardInsideLeft, com a extensão dot vue, e então colá-lo no conteúdo aqui, salve isso. Não precisamos nos preocupar muito com o conteúdo por enquanto, vamos compilá-los com componentes filho conforme necessário, apenas para que possamos ver qual página foi selecionada. Eu só vou adicionar algum texto dentro da primeira seção apenas dizendo CardInsideLeft, e isso é para que saibamos qual seção executamos quando clicamos nos componentes dinâmicos. Agora, podemos importar os componentes dentro do app.vue e, em seguida, registrá-lo. Se você descer para o script e, em seguida, podemos importar o CardInSideLeft e, em seguida, puxamos isso da pasta componentes. Aqui dentro, temos uma pasta de cartão e o nome do arquivo é CardInsideLeft, e então, claro, para baixo na seção de componentes, separados por uma vírgula, adicionamos o CardInSideLeft e definimos isso com o mesmo nome que chamamos aqui, do Cardinsideleft. Lembre-se que não precisamos adicionar esses elementos dentro do modelo, como fizemos com o cabeçalho nav. Porque este componente vai alternar entre todas estas páginas segue quando selecioná-los dentro do menu. Agora, tudo o que precisamos fazer é repetir o mesmo processo e criar mais duas seções ou mais dois componentes de arquivo único. Vou começar com o componente CardInsideright. Dentro da pasta do cartão vamos criar CardInsiderRight, novamente com a extensão dot vue. Isso também pode ter o mesmo conteúdo do interior à esquerda, então vamos selecionar tudo, copiar e colá-lo no conteúdo. Só para que você possa dizer a diferença, eu vou mudar o texto para dentro direita e depois salvar isso, e então finalmente nós também temos o CardBack, que precisamos adicionar. Cardback.vue e, em seguida, cole no mesmo conteúdo e altere o texto para CardBack. Voltar para o app.vue, e eu só vou copiar esta declaração de importação e, em seguida, colar isso em duas vezes. O segundo está dentro da direita. Mudando dentro do nome e também dentro do caminho do arquivo, e, finalmente, temos CardBack, e, em seguida, para baixo dentro da instância podemos adicionar dentro da seção de componentes nossos novos componentes. CardInsiderRight e, finalmente, os componentes CardBack. Isso deve ser agora está feito. Com os quatro componentes da placa agora no lugar, podemos certificar-nos de que nosso servidor de desenvolvimento está em execução e, em seguida, passar para o navegador. Se tudo estiver funcionando corretamente, agora devemos ser capazes de clicar em cada um dos links do menu e ver nossos novos componentes exibidos. Podemos ver que isso está trabalhando com os textos que adicionamos dentro de cada um. Ótimo, então agora com isso no lugar, estamos fazendo um bom progresso com nossa aplicação. Agora, é hora de seguir em frente e começar a criar os componentes de entrada de texto. 52. Criando o componente de entrada de texto: Temos nossas seções de cartão concluídas agora, e podemos alternar entre as diferentes visualizações clicando nos links do menu. Agora é hora de criar os componentes de entrada de texto. Esses componentes serão nossos primeiros componentes reutilizáveis. Então, podemos criá-los uma vez e, em seguida, usar várias vezes no aplicativo, como você pode ver aqui. Os componentes em si são bastante simples. Basicamente consiste de uma entrada de área de texto. Ele usa ligação de dados bidirecional com V-model para atualizar uma propriedade de dados quando um usuário digita. Essa propriedade data é animada para o componente pai tolo para locais. Quando chegarmos ao texto, vou colocar componente. Tudo o que fazemos para este componente já sabemos e já cobrimos até agora neste curso. Vamos começar criando os componentes chamados texto inputs.view. Se você for para a seção de contagem. Podemos adicionar nossos novos componentes aqui dentro. Então, entrada de texto, com a extensão.view. Então precisamos adicionar nossos modelos habituais. Então adicione estes na parte superior com as tags de abertura e fechamento. Você também pode adicionar nossas tags de script abaixo, e nós as usamos muito em breve. Não precisamos das tags de estilo nesses componentes específicos. Como as aulas Bootstrap cuidarão de todas as fotos de estilo. Nosso modelo você direta. Tudo o que você precisa fazer é adicionar algumas divs Bootstrap para layout, um cabeçalho e, em seguida, uma área de texto. Então vamos começar criando nossa primeira div, que vai ter a classe de linha. Então, dentro desta linha, vamos adicionar nossa grade de 12 colunas. Então adicione uma div aninhada dentro de lá, e então podemos adicionar mais algumas classes Bootstrap de carvão, SM 12 para torná-lo a largura total da página, e, em seguida, dentro aqui podemos adicionar o nosso recipiente para a área de texto. Então vamos adicionar uma div Bootstrap com a classe do grupo de formulários. Isso só vai lhe dar um pouco de estilo agradável em. Na parte superior deste componente, queremos adicionar um h para o título, e isso vai adicionar o texto do texto de edição. É assim que usamos, podemos ver claramente que esta é a área de edição enquanto as necessidades digitar em algum texto, e então podemos adicionar nossa área de texto. Então eu vou apenas remover o nome e o ID substituir isso por uma classe Bootstrap de controle de formulário. Então as colunas vão fazer isso um pouco maior e fazer isso 50 colunas, e nós só precisamos de quatro linhas. Eu vou então adicionar um espaço reservado, e o texto que vamos adicionar é apenas, adiciona texto aqui. Só para dar ao usuário algumas instruções. Em seguida, precisamos de uma propriedade de dados para armazenar o texto inserido do usuário. Então, podemos, em seguida, emiti-lo para os componentes pai esses dados, vamos usar ligação de dados bidirecional para ser atualizado a partir desta área de texto. Em nosso roteiro, podemos criar nossos objetos. Exportar padrões, e vamos criar nossa propriedade de dados da maneira usual, e eu vou retornar a propriedade de dados de entradas de caixa de texto. Inicialmente eu vou definir isso para uma string vazia. Uma vez que nenhum texto está sendo adicionado aqui ainda. Agora tem essas entradas de caixa de texto como uma propriedade de dados. Podemos adicioná-lo à nossa área de texto usando o modelo para vinculá-lo. Então, logo após o atributo de espaço reservado, queremos adicionar isso em uma nova linha. Então modelo V, e isso vai ser entrada de caixa de texto. Então agora vamos ter a configuração de ligação de dados bidirecional. Agora podemos emitir o valor desta área de texto para os pais. Isto pode ser conseguido através da adição de um método chamado On Each Keyboard Events. Ainda dentro dessa área de texto, vou adicionar um ouvinte de evento para acionar um novo método chamado Texto Alterado. Cada vez que uma chave foi liberada. Então, adicionamos o símbolo @ e, em seguida, os eventos de key-up. Assim, cada vez que uma chave está sendo liberada, podemos acionar um evento chamado texto alterado. Em seguida, podemos criar o nosso método abaixo para acionar os eventos de emitem personalizados. Então, dentro do script, abaixo dos objetos de dados, adicione uma vírgula, e então podemos adicionar nossos métodos. Este método, é claro, precisa ser o mesmo em, o que temos aqui de texto alterado, e, em seguida, dentro do corpo da função queremos emitir esses dados. Então, este sinal de $ emite. Então lembre-se de antes, precisamos passar em dois argumentos. O primeiro é um valor de string, e este é o nome de nossos eventos. Vou chamar este texto de exibição alterado. Você pode usar um nome diferente, se preferir. Bem, eu acho que este nome descreve o que fazemos bem, e então o segundo parâmetro é o valor que você deseja enviar. Então isso começa a entrada de caixa de texto, que temos aqui. Então, no final, como o segundo argumento. Então agora temos os eventos personalizados chamados texto de exibição alterado. Podemos adicionar o componente para o arquivo ponto v conferência como componentes filho e ouvir o evento. Mas vamos voltar para os slides como podemos ver aqui. Usamos o mesmo componente três vezes. Se abrirmos as frentes de cartões, o arquivo de visualização, podemos adicionar esses componentes dentro daqui. Primeiro, precisamos importar os componentes dentro do script. Então, assim como fizemos antes, podemos impulsionar os componentes de entrada de texto e, em seguida, adicionar o caminho do arquivo que é ponto barra. Este vai ser apenas entradas de texto. Então isso ocorre porque a entrada de texto está na mesma pasta que as frentes de cartão. Não precisamos entrar na pasta de cartão ou componentes porque já estamos lá. Então precisamos criar nossos componentes, datas propriedade. Então, exporte, padrão e adicione nossos componentes. Então eu vou adicionar um prefixo CC, que significa cartões criativos. Isto é para garantir que o nome é um pouco menos genérico, mais adaptado ao nosso aplicativo. Portanto, entradas de texto CC, que é um alias para entrada de texto. O CC também pode evitar quaisquer conflitos de nomenclatura com qualquer visualização JS Plugins ou bibliotecas, que poderíamos adicionar no futuro. Então vamos salvar isso e, em seguida, passar para a seção de modelo. Então, dentro da área de edição, vamos adicionar nossos componentes. Então CC entrada de texto. Em seguida, se você se certificar de que seu servidor de desenvolvimento está funcionando, salve e, em seguida, vá para a frente. Agora devemos ver que o componente de área de texto agora é adicionado ao nosso aplicativo. Vamos deixar esse vídeo lá e vamos voltar e continuar com essas entradas de texto no próximo vídeo. 53. Recebendo dados da entrada de texto: No último vídeo, criamos e registramos com sucesso nossos novos componentes de entrada de texto. Agora vamos continuar adicionando este componente à frente do cartão mais duas vezes. Vamos passar para a vista da porta frontal do cartão e aqui onde criamos as entradas de texto CC, vamos copiar isso e colá-lo em mais duas vezes. Você deve estar vendo um pouco de um padrão no meu [inaudível] para exibir os componentes que adicionamos como elementos HTML. Tudo o que precisamos fazer é adicionar isso três vezes, e então você pode ver como eles mostraram três vezes dentro da frente do cartão. Agora temos nossos três componentes, também precisamos adicionar o ouvinte de eventos que adicionamos dentro da entrada de texto. No momento, estamos emitindo o evento chamado Exibir Texto Alterado. De [inaudível] para isso dentro dos componentes usando @ texto de exibição alterado e, em seguida, também precisamos adicionar isso ao nosso segundo e terceiro componentes. Apenas copie e cole esses sobre. Aqui temos três componentes adicionados que todos ouvir para o evento de mudança de texto de exibição para ser passado para ele. Agora precisamos adicionar propriedades de dados livres para armazenar o valor de texto recebido para que seja um para cada componente. Vamos ao nosso script e podemos adicionar nossa propriedade de dados. O primeiro que queremos adicionar vai ser um nome de caixa de texto valor 1 que vai ser inicialmente uma string vazia. Porque você tem três componentes separados, eu também vou adicionar o mesmo para os números 2 e 3. Valor de caixa de texto 2, novamente definido para ser uma string vazia por agora e, em seguida, valor de caixa de texto 3. Com isso agora em vigor, agora podemos atualizá-los com o valor dos eventos passados dos componentes [inaudível]. Vamos fazer isso exatamente como olhamos anteriormente dentro do ouvinte de eventos. Podemos começar adicionando valor de caixa de texto 1 no primeiro componente e certamente é igual ao valor do evento e, em seguida, fazemos exatamente o mesmo para o segundo e terceiro componentes. Valor da caixa de texto 2 e, em seguida, caixa de texto 3. Com isso agora em vigor, tudo o que precisamos fazer é verificar se os dados estão sendo recebidos de cada um de nossos componentes, é simplesmente produzir valores usando a interpolação de texto. Vamos começar pela saída de um valor de caixa de texto 1 e, em seguida, o valor de caixa de texto 2, em seguida, o mesmo para o valor 3, salve isso. Certifique-se de que o servidor de desenvolvimento está funcionando e , em seguida, se passar para o navegador. Agora, se começarmos adicionando algum texto no primeiro, podemos ver que o texto é exibido na parte inferior, que é a nossa área de texto 2. Agora temos a área de texto 2 exibido também. Vamos tentar o terceiro. área de texto 3 também está aparecendo lá. Agora podemos ver que temos três dos mesmos componentes exibidos na tela. Agora vamos reutilizar o nosso componente três vezes. No entanto, os dados são armazenados de forma independente para que cada um quando digitamos tem seu próprio valor de dados correspondente. Se conseguires pôr tudo isto a funcionar, parabéns. Você deve estar pegando o jeito dos componentes agora e agora você está pronto para passar para o próximo vídeo. Vamos começar a criar as áreas de saída de texto. 54. Criando o componente de saída de texto: Agora temos os componentes de entrada de texto criados e também exibir na tela também, agora eu vou criar o arquivo de saída de texto. Este vai ser o componente que exibe o texto no cartão. Novamente, assim como as entradas, estaremos usando três desses componentes para exibir o texto no cartão. Primeiro, podemos excluir os campos de valor da caixa de texto do arquivo frontal do cartão. Vamos remover TextBoxValue1, 2 e 3. Já testamos isso e sabemos que não está funcionando. Como fizemos com os componentes de entrada, vamos criar um novo arquivo de componente, desta vez chamado TextOutput. Vá até a pasta do cartão, crie um novo arquivo chamado TextOutput, com a extensão.veu. Agora podemos adicionar nosso modelo. Por enquanto, este modelo vai ser bastante simples, tudo o que eu vou fazer é criar uma div como um wrapper, e depois dentro da div, basta adicionar algum texto, apenas de texto de amostra para que possamos ver os componentes na tela. Logo abaixo do modelo, podemos adicionar nossas tags de script também, e eu vou apenas criar um padrão de exportação vazio por enquanto, seguido pelas tags de estilo. Depois de fazer isso, precisaremos importar e registrar o componente dentro do cardfront.vue. Estamos até a seção de script e, em seguida, eu vou apenas copiar estes declaração de importação e, em seguida, colá-lo abaixo. Mas desta vez altere-o para TextOutput. O mesmo para o caminho do arquivo. Na seção de componentes, adicione coma. Estou olhando para o nosso CCTextOutput. Dê um cofre a isso. Agora temos acesso ao componente neste arquivo. Agora é hora de adicioná-lo à área de exibição do cartão dentro do modelo. Vá até a seção de exibição do cartão, e então podemos adicionar ccTextOutput e, a tag de fechamento. Como mencionado, vamos exibir isso três vezes. Eventualmente, essas seções de saída irão exibir o texto dessas três seções de entrada de texto. Salve isso e, em seguida, inicie os servidores com npm run dev. Se você precisar, então podemos ir para o navegador, e vemos o componente em ação, mas vamos passar o texto para tipos de usuário para o componente no próximo vídeo, vamos dar nossa primeira olhada no uso de adereços. 55. Passando dados com props: Então é assim que nossa estrutura parece até agora. Temos componentes de entrada de texto e saída dentro de um componente pai chamado CardFront. Os dados podem ser passados entre dois componentes irmãos. Portanto, não podemos mover o texto da entrada para os componentes de saída diretamente. Em vez disso, temos que nos comunicar através do componente pai, que é Card Front. Já sabemos como passar dados de um filho para um componente pai. Fazemos isso emitindo um evento personalizado e já estamos fazendo isso em nosso aplicativo, então temos essa parte coberta. Em seguida, precisamos de uma maneira de fazer isso todo o caminho. O componente pai precisa passar esses dados de volta para um componente filho. No nosso caso, para o componente de saída de texto. Podemos fazer isso com adereços, que é a abreviação de propriedades. Props são atributos personalizados para transmitir dados para componentes filho. Se você vem de um fundo react.js, ele funciona da mesma maneira. A primeira coisa a fazer é declarar dentro do componente filho os adereços que esperamos receber. Então, se passarmos para o arquivo TextOutput.vue e, em seguida, para baixo para o Script. Podemos então adicionar nossos adereços aqui dentro. A opção adereços é uma matriz de nomes de prop, que esperamos ser passados como uma string. Eu chamei este prop de Texto de Exibição para refletir os dados que serão transmitidos para ele. Podemos voltar para nossos modelos e remover o texto de amostra. Então, no lugar disso, podemos adicionar o nome do prop, que é Exibir Texto. Então, uma vez que esses dados são passados para baixo, isso será exibido dentro do nosso template. Agora podemos adicionar este prop sobre no componente pai, que é cardfront.vue. Então, para começar, adicionamos um atributos personalizados dentro do componente Saída, que é o nome da prop. Então eu vou adicionar, Exibir Texto aqui dentro. Então este teste vai apenas adicionar uma string de, Olá. Portanto, agora certifique-se de que o servidor de desenvolvimento está em execução. Agora, se passarmos por cima, devemos agora ver o valor do adereço na tela. Portanto, esse valor está sendo passado para o componente filho de saída de texto. Em seguida, dizemos vue.js quais adereços esperamos receber e, em seguida, podemos enviá-los dentro de nossos modelos. No entanto, neste caso, isso só funciona porque usamos uma string. Se tentarmos usar dados dinâmicos, como o nosso TextBoxValue1. Então copiamos isso e colamos isso. Vemos que isso não vai funcionar. Nós apenas obter o valor da string em vez dos dados dinâmicos. Se os dados são dinâmicos, precisamos usar v-binds ou a sintaxe abreviada. Então, logo antes de Exibir Texto, podemos adicionar a sintaxe curta dos dois-pontos, agora salve isso. Agora, se passarmos para o navegador, e começarmos a digitar texto dentro da primeira caixa de entrada de texto. Podemos ver que as mudanças estão agora refletidas no lado direito. Tentamos isso com o segundo. Vemos que nada acontece porque ainda não adicionamos nenhum adereço ao segundo ou terceiro componente. Então vamos para o CardFront e podemos fazer isso agora para o segundo e terceiro componentes. Então copie os adereços e adicione isso no segundo e terceiro componentes. Para tornar esses únicos, precisamos adicionar à propriedade date ou TextBoxValue2 e TextBoxValue3. Então guarde isso. Agora devemos ter três componentes independentes. Então box1, box2, e finalmente box3. Então, todos eles estão trabalhando de forma independente com seus próprios dados. Todas essas três áreas de texto funcionam independentemente porque têm uma fonte de dados diferente. É assim que podemos usar adereços para passar dados para componentes filho. É importante que entendamos os adereços formam uma ligação unidirecional para baixo, que significa que se os dados pai forem atualizados. Os dados serão transmitidos automaticamente para a criança. No entanto, não deve funcionar ao contrário. Não devemos alterar o valor do adereço dentro do componente filho, devemos tratá-los como somente leitura. Se precisarmos de alterar o valor de um prop que está a ser transmitido, não devemos fazê-lo directamente. Se queremos usar um prop e, em seguida, alterar o valor, devemos primeiro configurar uma propriedade de dados dentro dos componentes filho. Devemos então atribuir a propriedade dates como o valor inicial da prop e, em seguida, alterar seus dados em vez de alterar o valor prop diretamente. 56. Mantendo os componentes vivos: Ao usar componentes dinâmicos e alternar entre eles como estamos aqui, há um pequeno problema criado que pode ser necessário resolver. Se escrevermos algo em uma das caixas de entrada de texto como esta, vemos o resultado no lado direito. O problema ocorre quando alternamos o componente ativo usando os links manuais. Se selecionarmos componentes diferentes, como Inside Left, volte para a Frente. Vemos que o texto que adicionamos está perdido. Também no final do projeto quando adicionamos entradas de texto e imagem para todas as páginas. A mesma coisa acontecerá com todos esses componentes também. Por que isso acontece? Bem, no início do curso, analisamos o ciclo de vida da visualização, que é os estágios da instância de visualização que passa desde a curadoria até a destruição. Quando mudamos os componentes dinâmicos, componente ou se afastar, é então destruído e removido da memória. Veja provedores de jazz com uma solução simples para isso. Tudo o que precisamos fazer é envolver nossos componentes dinâmicos com elementos reservados ANOVA chamados keep life. Se voltarmos para o nosso editor de texto e, em seguida, passar para a vista ponto aplicativo, temos um componente que está registrando a página ativa atual. Vamos envolver isso dentro do wrapper Keep-Alive para adicionar a tag de abertura, e depois do componente, podemos adicionar a tag close também. Eu não guardei isso. Agora, se formos para o navegador, podemos começar adicionando alguns dados dentro da primeira área de texto, e um agora se nos afastarmos e depois voltar para a frente, veremos que os dados estão sendo preservados. Esta é uma solução realmente simples que visualiza provedores de GS para manter dados de componentes dinâmicos dentro da memória. 57. Escopo dos estilos de CSS: No início desta seção, criamos todos os componentes dos cartões. Criamos o meu cartão de cópia a partir do arquivo. Este arquivo já tinha algum estilo dentro das tags de estilo. Se descermos até a parte inferior da frente do cartão, podemos ver entre tags de estilo, temos a área de edição e estilos de exibição do cartão. A duplicação desse arquivo também adicionou os mesmos estilos a todos os arquivos de cartão. Por exemplo, se você ir para Card Back e rolar para baixo até o estilo, podemos ver que temos código duplicado. Se quisermos excluir os estilos deste arquivo cardback.vue, vamos salvar isso e ver o que acontece. Vamos para o navegador e, em seguida, se formos para o “Voltar”, ainda podemos ver que o estilo ainda se aplica porque temos a cor de fundo, o preenchimento, e também a altura de 800 pixels aplicando. Isso ocorre porque qualquer estilo no qual adicionamos dentro do arquivo componente ainda será aplicado em todos os lugares em nosso aplicativo. Para reduzir o código dentro de nosso aplicativo, podemos excluir todos os estilos do Card Back, o que já fizemos. O CardInSideLeft, então mova-os para seções de estilo. Então, finalmente, do CardInsiderRight. Isso agora deixa nosso estilo dentro da área original do CardFront. Deixando os estilos apenas no arquivo CardFront porque eles serão aplicados a todo o resto. Mas e se tivéssemos um caso em que queremos conter o CSS para um único componente específico? Para este caso, podemos adicionar “escopo” para a tag estilo de abertura assim. Adicione os atributos com escopo e salve isso. Agora vamos para o navegador. Se você for para a frente, podemos ver que o estilo se aplica dentro da frente do cartão. Vamos tentar InsideLeft, InsiderRight e também o Voltar. Agora podemos ver que o estilo é restrito a um único componente de arquivo. Eu vou voltar para a frente do cartão e remover “escopo”. Isso ocorre porque você deseja que ele o aplique a todas as outras páginas. No entanto, temos alguns usos para usar o escopo dentro do nosso aplicativo. Por exemplo, no arquivo TextOutput, podemos produzir o texto dentro das tags HTML p. Podemos então estilizar este texto e ter o estilo apenas se aplica ao texto exibido no cartão real, que é esta área dentro de nossos templates. Vamos descer ao estilo e adicionar “escopo” aqui dentro. Isso só se aplica ao TextOutput. Então eu vou definir uma nova família de fontes para aplicar apenas à seção do cartão. Vou até o Google e selecionar uma fonte do Google. Vou procurar o Google Fonts Tangerine e, em seguida, selecionar isso. Esta é a fonte que vou usar para este projeto. Você pode, naturalmente, mudá-lo, se preferir. Depois de selecionar sua fonte, clique no símbolo de adição na parte superior, e então podemos expandir. Aqui recebemos algumas instruções sobre como adicionar as fontes do Google. A primeira coisa que você deseja fazer é copiar o link na parte superior. Este é o link para as folhas de estilo. Em seguida, vá para o index.html e, em seguida, vamos adicionar isso logo abaixo do link bootstrap. Cole isso lá e dar um salvamento e voltar para o Google Fonts. Podemos então copiar a linha de CSS. Copie isso e, em seguida, podemos adicionar isso em nosso arquivo TextOutput dentro do CSS para os elementos P e, em seguida, colar no código que você acabou de copiar. Salve isso, verifique se o servidor de desenvolvimento está funcionando e depois volte para o projeto. Vamos começar a digitar dentro dos componentes de entrada. Podemos ver que o texto está aplicando, embora seja realmente pequeno por enquanto, mas está funcionando, e podemos ver as fontes estão aplicando. Para corrigir isso, eu vou voltar para o arquivo e adicionar um pouco mais de estilo. Vou definir o tamanho padrão da fonte para 42 pixels. Eu também vou combinar a altura da linha de 42 pixels. Só para dar uma olhada um pouco melhor, vou adicionar a sombra de texto de dois pixels, dois pixels, dois pixels para os três lados; e então a cor de aaa. A cor do texto, Eu vou adicionar o meu como 4d4d4d. Indo também adicionar alguma margem, cinco pixels na parte superior e inferior, e zero na esquerda e direita, apenas para dar um pouco de espaçamento. Eu também vou adicionar uma fronteira e vamos ver o porquê em breve. Apenas um pixel pontilhado e uma cor cinza. Em seguida, a propriedade de espaço em branco da pré-linha. pré-linha preserva as quebras de linha, o que impede que todos os textos apareçam na mesma linha. Se o usuário clicar em “Enter” e começar a digitar uma caixa de texto na linha abaixo, o mesmo será aplicado no lado da saída para que tudo não esteja na mesma linha. Então, finalmente, vamos transbordar de oculto, apenas no caso de o usuário digitar muito texto que não pode caber na área. Nós guardamos isso e veremos como isso parece. Agora vemos que o texto é um pouco maior, e também temos algumas sombras de fonte. Parece que não vejo o pontilhado, vou mudar isso para ser pontilhado e lá vamos nós. Você percebe que temos algumas linhas pontilhadas feias. Isso ocorre porque sem o texto, a borda da linha pontilhada não tem altura. Podemos ignorá-los por enquanto porque vamos passar adereços para esses componentes no próximo vídeo, que irá definir a altura dos componentes. Então teremos uma bela borda pontilhada em torno de cada seção. O principal é um texto para o cartão é estilo agora. Esses estilos têm escopo para serem aplicados somente a esses componentes. 58. Validação de props: Ao passar dados para componentes filho via adereços, às vezes você deseja certificar-se de que enviamos o tipo correto de dados a serem usados. Por exemplo, se os componentes filho espera que um número passe para ele ou, em vez disso, recebe uma cadeia de caracteres , isso pode causar problemas. Usar validação prop é uma maneira de definir os requisitos para que a prop seja recebida. Se a validação falhar e o VGS enviará um erro de console durante o desenvolvimento. Primeiro vamos passar para o arquivo v frente do cartão e adicionar um novo prompt para passar para baixo para os componentes de saída de texto provavelmente usado para definir a altura dos recipientes de impostos no cartão. Porque latente faremos o mesmo com a exibição da imagem. Podemos reorganizar as alturas dos componentes, para caber o cartão corretamente. Precisamos e esta sonda dentro dos componentes de saída de texto CC. Vou chamar isso de alturas de contêiner e definir isso para um valor de 130. Portanto, este valor de 130 será usado como uma propriedade CSS. Vamos fazer o mesmo para o segundo, terceiro componente, copie isso e cole-o duas vezes. Então, uma vez que isso é feito sobre o texto output.file, podemos adicionar o nome apropriado para a matriz. Já temos os nossos adereços. Nós podemos separá-los com uma vírgula e também adicionar nosso segundo adereço, altura do recipiente em adereços para a matriz, como isso funciona bem. Mas queremos adicionar algumas validações componente tele. Que tipo de dados esperamos receber? Para fazer isso quando é triste adereços ser um objeto. Podemos definir o tipo de datas que queremos receber dentro de uma matriz. Observe que mais de um tipo de dados pode ser usado, como um número de string, função booleana, um objeto, ou até mesmo uma matriz. Então, vamos adicionar em nosso prop de texto de exibição. Vamos adicionar isso de volta. Adicionar este é um tipo de string para a matriz. Podemos testar esta validação passando por uma nova auto-estrada e ver o que acontece. Mais na frente do cartão, em vez de enviar o valor da caixa de texto usado, vai enviar um valor de string. Digamos 12. Agora, se você abrir o console, podemos ver que há um erro. Diz que o livro de cordas esperado tem um número. Então isso significa que a validação está funcionando. Então agora vamos mudar isso de volta para o volume da caixa de texto. É assim que podemos adicionar validação de dados básicos. Há também mais coisas que podemos fazer, separados por uma vírgula. Vamos agora adicionar o segundo suporte da altura do contêiner. Como isso terá mais de um tipo de validação, precisamos definir isso para ser um objeto e, em seguida, adicionar isso como um tipo de número. Podemos também declarar se queremos que este suporte seja exigido. Este é um valor booleano que eu vou definir como verdadeiro. Isso diz ao VGS que esta presença na maioria das vezes, caso contrário, receberá um aviso de console. Podemos testar removendo qualquer recipiente alto adereço dos pais de desenhos animados, e depois cabeça para o console. Aqui dentro, recebemos a mensagem de aviso dizendo que falta suporte necessário da altura do contêiner. Agora vamos adicionar isso de volta e depois salvar. Então de volta em nossos prompts na saída de texto. Além disso, podemos adicionar um valor padrão se nenhum valor for passado. Obviamente, isso não faria sentido para ser adicionado com necessário, lodo substituir necessário com padrão, e quer vendê-lo para um valor de 200, que é claro é um número.Então agora, se nenhum prop é passado através de um componente, o valor padrão de 200 será usado em vez disso. Agora temos esses dados validados sendo passados como prop validado. Nós usamos no próximo vídeo para definir um recipiente alturas, adicionando-o ao objeto estilo. 59. Passando dados de props para um objeto de estilo: Nosso aplicativo agora está sendo passado um adereço validado, que é um número. Podemos usar este número para definir do lado de fora a altura que queremos que a caixa de texto do lado direito seja, que é esta área aqui. Este prop é chamado conter alturas, e vamos passar o valor para um objeto de estilo para definir a altura do recipiente usando CSS. Para fazer isso, vamos configurar uma propriedade computada dentro do arquivo de saída de texto. Nós só rerenderizaremos quando houver uma alteração na altura do recipiente. Vamos adicionar nossa seção computada logo abaixo dos adereços, separados por uma vírgula. Vou chamá-lo de uma propriedade computada nosso StyleObject e então vamos retornar a altura. Eu vou definir as alturas para ser igual a isso.ContainerHeight, que é o nosso suporte que está sendo passado para. Então, por ser passado um número e queria ser um valor CSS, também podemos adicionar px para pixels no final. Este objeto de estilo irá adicionar uma propriedade CSS high, define o valor da prop, que é atualmente 130, que você define aqui. Em seguida, dentro do objeto, adicionamos px para declarar que este é um tamanho de pixel. Agora nosso objeto de estilo é criado Podemos adicioná-lo à nossa abertura p-tag como um atributo de estilo. Role de volta para nossos modelos e dentro da tag de abertura, use os dois pontos para vincular os estilos como estes são dinâmicos. Isso vai ser igual à nossa propriedade computada, que é StyleObject. Vamos adicionar isso a uma linha separada. Salve-os. Se voltarmos para o cartão, podemos ver que temos as caixas de saída de texto livre definido para uma altura de 130 pixels, e é por isso que anteriormente definimos a borda pontilhada. Podemos ver claramente qual seção é qual. Vamos passar para as ferramentas de desenvolvedor e nós também deve ser capaz de ver esta propriedade CSS. Se selecionarmos a caixa de saída de texto, podemos ver dentro dos elementos p, temos o estilo definido para uma altura CSS de 130 pixels. É assim que podemos trabalhar com nossos adereços, que são passados para o componente. Observe que isso é bom para fazer, pois não estamos modificando o valor da prop diretamente. Estamos usando apenas o valor prop e, em seguida, adicioná-lo a um objeto CSS. 60. Introdução aos slots: Agora sabemos como analisar dados do componente pai para o componente filho usando Props. Também podemos passar dados para o componente filho usando um método chamado Slots. Os slots são usados para o que é chamado de distribuição de conteúdo. Muitas vezes, precisamos misturar o componente pai e filho contentemente sempre. Em nosso aplicativo até agora, se você passar para o app.vue, podemos ver que temos o cabeçalho na parte superior e, em seguida, abaixo ele terá os elementos componentes dinâmicos. Nós nem sempre temos nossos componentes cuidadosamente empilhados uns sobre os outros, como fazemos até agora neste aplicativo. Os componentes podem ser aninhados dentro uns dos outros, ou podemos até mesmo aninhar conteúdo HTML entre os componentes de abertura e fechamento tag. Por exemplo, digamos que queríamos que nossos elementos de componente fossem aninhados dentro do componente de cabeçalho. Vamos abrir o nav-header e, em seguida, se cortarmos o conteúdo do componente, incluindo as tags keep-alive e, em seguida, colá-lo lá dentro. Agora temos uma situação em que as coisas ficam um pouco confusas. O componente nav-header tem seu próprio arquivo de modelo, assim como o componente dinâmico, como conferência. Precisamos de uma maneira de dizer ao Vue js onde dentro do nav-header nossos componentes dinâmicos serão adicionados. Este arquivo de cabeçalho tem seus próprios modelos. Então, o componente dinâmico será renderizado antes ou depois deste modelo? Bem, isso depende de nós. Este é o lugar onde Slot entrar. Slot nos permitem controlar a distribuição deste conteúdo. Declaramos um slot dentro do modelo para colocar o conteúdo dentro. Atualmente, se nós sobre o navegador agora, nós só vemos o cabeçalho na parte superior e nenhum sinal do conteúdo que temos aninhado dentro do aplicativo. Apenas aqui. Você só vê essa seção de cabeçalho e nada mais. Para exibir o conteúdo aninhado, no arquivo Header.vue, podemos adicionar o elemento de slot especial dentro do modelo pai. Logo abaixo do div-wrapper, eu quero adicionar o slot, abertura e fechamento tag. Guarde isso. Então agora podemos ver que o conteúdo é agora colocado dentro. Este é o componente dinâmico que está no topo e, em seguida, abaixo temos o cabeçalho. Isso ocorre porque colocamos um slot acima da seção de cabeçalho, que está aqui. Também podemos adicionar o slot em qualquer lugar que gostamos. Podemos cortar isso com o modelo e, em seguida, adicioná-lo abaixo dos links do menu e agora vemos que nosso aplicativo voltou ao normal. Não estamos limitados apenas a nidificar apenas componentes. Também podemos aninhar elementos HTML dentro de componentes. Primeiro, vamos retornar nosso aplicativo de volta ao que era. Se removermos esses slots, em seguida, em app.vue, se movermos os componentes fora da seção de cabeçalho. Vou criar um novo componente de rodapé e, em seguida, passar o conteúdo para isso através de elementos HTML de aninhamento. Vamos dar uma olhada nisso em ação. Nos componentes, vamos adicionar um novo arquivo. Desta vez vamos adicionar fora da seção atual. Portanto, certifique-se de que isto está ao lado do header.vue. Este é o arquivo rodapé.vue. Eu mantive isso fora da subpasta do cartão para manter apenas componentes relacionados ao cartão organizados dentro de lá. Vamos adicionar nosso modelo familiar. Precisamos de um elemento raiz para cercar nosso conteúdo. Podemos usar o elemento rodapé do arquivo HTML em vez de uma div. Como já sabemos, precisamos importar e registrar o componente para garantir que isso esteja disponível. No arquivo App.vue, vamos fazer isso agora. Eu só vou copiar uma instrução de importação e colar o mesmo e , em seguida, alterá-lo para ser o rodapé, também o mesmo para o caminho do arquivo. Certifique-se de que este é apenas componentes/rodapé, não precisamos da pasta do cartão. Nos componentes, podemos registrá-lo separado por uma vírgula. Vou chamar meu CCFooter, que é um arquivo de rodapé. Agora isso está registrado, podemos ir até o modelo ainda dentro app.vue. Logo abaixo do componente kept-alive, vai adicionar esses elementos de CCFooter. Nosso componente Rodapé atualmente não tem conteúdo dentro do modelo, portanto, não veremos nenhuma alteração no aplicativo. Isso ocorre porque vamos adicionar o conteúdo rodapé como elementos HTML aninhados dentro deste componente Rodapé. Em vez de ter nosso conteúdo dentro do arquivo de rodapé, podemos adicioná-lo entre essas duas tags. Vou começar adicionando um texto de Creative Cards. Vou adicionar a entidade HTML para o símbolo de copyright, que é o e comercial e uma cópia com ponto e vírgula no final. Então eu quero adicionar uma classe bootstrap para algum estilo de text-center. Lá começamos a trabalhar adicionando alguns links de navegação. Abra os elementos nav-e lá podemos criar nossa lista não ordenada. Vou adicionar algumas classes à lista não ordenada de navegação e, em seguida, justificar o centro de conteúdo. Em seguida, podemos adicionar alguns itens da lista. Eu só vou para o cabeçalho e pegar um desses itens da lista, só para que possamos manter as classes consistentes e, em seguida, colar isso dentro da ul. Temos a classe do item de navegação. Temos o link, que é mostrado por este clique neste agora. O primeiro que vou adicionar como Lar e depois quando adicionar mais alguns links, copie e cole em mais duas vezes. Agora temos nossos três links. O primeiro é o Lar. O segundo eu vou mudar para Sobre Nós e, em seguida, o terceiro e último link, eu vou mudar para Fale Conosco e, em seguida, dar um salvamento. Se formos para o navegador e atualizar, veremos que nenhuma alteração foi aplicada. Sabemos pelo nosso exemplo anterior que o conteúdo aninhado não será exibido. Precisamos adicionar o nosso elemento slot para o componente pai, que é rodapé.Vue, então vamos adicionar isso aqui dentro. Com o elemento slot adicionado, Vue js agora sabe onde queremos distribuir conteúdo que adicionamos entre as tags de rodapé. Certifique-se de que está guardado e, em seguida, vá para o navegador e, em seguida, para baixo, temos o nosso conteúdo de rodapé. É assim que podemos usar Slots para distribuir conteúdo para onde queremos que ele apareça. Este é um olhar básico sobre o uso de Slots. Há mais algumas coisas a serem abordadas ao usá-las, e continuaremos a analisá-las no próximo vídeo. 61. Escopo do slot e conteúdo de fallback: Agora vamos continuar a olhar mais fundo um slots e entender mais sobre eles. No último exemplo, usamos um único elemento de slot em nossos componentes de rodapé. Se houver apenas um único elemento de slot, como temos aqui, todo o conteúdo que foram adicionados entre as tags de componente, que é tudo isso, será inserido dentro deste slot. Mais no rodapé, também podemos adicionar conteúdo entre os elementos do slot como este. Então vamos adicionar algum texto dentro daqui. Todo texto de rodapé, e isso é o que chamamos de conteúdo de fallback. Se passarmos para o navegador e rolar para baixo até o rodapé, podemos ver o texto não é exibido para baixo na seção rodapé. Isso ocorre porque o conteúdo entre as tags de slot é considerado conteúdo de fallback. Isso significa que ele só será exibido se não houver conteúdo para inserir. Assim, para comentários fora os elementos aninhados nos componentes pai, que é app.vue. Comente nesta seção, até a tag de navegação de fechamento. É agora voltar para o rodapé e podemos ver que temos o conteúdo de fallback barras de texto de rodapé para comentário longo. Esta seção volta para fora. Isso é apenas algo a considerar se o conteúdo não estiver imediatamente disponível. Talvez queiramos usá-lo com visual, por exemplo, e poderíamos mostrar o conteúdo de fallback até que o visual se torne verdadeiro. Outra consideração é o escopo do conteúdo. Atualmente, temos uma seção nav dentro do rodapé que está aninhado. Então todo o código dentro daqui é compilado nos pais ou dentro do escopo da criança? Bem, vamos dar uma olhada e descobrir. Então, digamos que nossos cartões criativos textos no rodapé, que é apenas no topo aqui, foi dinâmico. Então, em vez de ter esta seção aqui, se isso fosse dinâmico, tínhamos alguma propriedade de dados, como AppName, essa propriedade de dados AppName seria restaurada na seção de script dos componentes pai ou filho? Bem, a resposta está dentro dos componentes dos pais. Se formos até a seção de script, e dentro da seção de dados, vamos adicionar nosso AppName. Eu defini isso para ser, Creative Cards. Vá para o navegador, vemos que os cartões criativos apareceram na parte inferior, e que tem uma calibração extra lá então vamos remover isso. Agora estamos vendo o navegador que o texto aparece no rodapé. Agora podemos ver que o AppName funciona dentro da seção pai. No entanto, se tentarmos mover essa propriedade de dados para o rodapé. Vamos remover AppName e , em seguida, queremos copiar apenas esta seção de dados e, em seguida, adicionar isso dentro do rodapé. Então adicione as tags de script, os padrões de exportação e, em seguida, cole em nossa seção de dados. Aqui podemos adicionar nosso AppName como uma string de, “Creative Cards”. Então salve isso e vamos voltar para o aplicativo, e podemos ver que não temos mais o texto aparecendo. Podemos ver o escopo está dentro do arquivo app.vue pais. Vamos apenas remover a tag de script do rodapé e adicionar isso de volta ao app.vue. Então tudo dentro dos pais simplesmente está dentro do escopo dos pais. Tudo dentro dos componentes filho está dentro do escopo filho. Tais apenas algumas coisas para pensar ao usar slots. Em seguida, vamos dar uma olhada no uso de slots de nome. 62. Slots com nome: Até agora, temos usado apenas um único elementos de slot. Este único slot como ele é será usado para receber toda a seção de conteúdo, que nós passamos para ele. Como toda a seção entre o rodapé aqui. Como uma nota lateral, se não havia presença elemento ranhura. Se comentarmos ou mover a seção de slot e salvá-lo, se formos para o navegador, vemos todo o conteúdo que está sendo passado para ele. Em seguida, dentro dos componentes pai é descartado. Vamos apenas desfazer esta seção de slot e adicioná-los novamente. Em vez de apenas usar um único slot para aceitar o conteúdo completo. Nós também poderia usar um ou mais elementos de slot com um atributos de nome especial. Dentro do rodapé.vue, podemos adicionar um atributo de nome ao nosso slot. Este é o nome de nossa escolha, o nome de alguém, o nome deste aplicativo. Agora podemos passar para os componentes pai e combinar seu nome com o conteúdo que queremos passar para ele usando o atributo slot. A seção de nome do aplicativo, que fica na parte superior aqui. Vou adicionar atributos dentro da peça de abertura. Nos atributos de slot e virá corresponde ao slot de saída com o nome que você acabou de dar tudo “app-name”. Vamos ver como isso parece. Agora, na parte inferior, apenas o nome do aplicativo é exibido dentro do rodapé porque nós apenas distribuímos esse conteúdo. Eu vou adicionar o símbolo de direitos autorais pouco antes de um dado dinâmico, então e assinar cópia e o ponto-e-vírgula, e então veremos o símbolo de direitos autorais de volta na tela. Como você pode ver, o resto dos elementos desaparecem. Já não temos ligações suficientes. Para que o resto seja exibido, temos algumas opções. Primeiro, podemos continuar a adicionar mais slots. Também com os atributos de nome, como fizemos aqui. Ou podemos pegar todo o resto do próprio conteúdo nome e distribuí-lo para inverter elemento slot, desta vez com nenhum atributo nome. Se você remover o texto do rodapé. Eu estou trazendo isso lá em cima, e nós também podemos adicionar um segundo elemento slot, assim como foram feitos anteriormente, mas sem atributos de nome, e agora se vamos para o navegador, devemos ver o resto do conteúdo do rodapé aparecer. Agora temos o nosso texto, que é os slots de nome. Em seguida, todo o conteúdo adicional, que são os links de navegação, agora é processado através de nossos elementos de slot sem nome. Este é um caso simples de distribuição de conteúdo com slots. Se o nosso rodapé tinha permitir mais código HTML, usa slots para colocar o conteúdo exatamente onde queríamos, é ferramenta realmente útil para ter. 63. Desfecho da seção: introdução aos componentes: Oi. É Chris de novo. Eu só quero dar um fôlego rápido nesta fase. Nós já cobrimos muitos motivos e aprendemos muito sobre componentes, e como eles podem se comunicar uns com os outros. Nosso projeto também está indo bem agora, mas ainda temos muitos recursos e melhorias para adicionar na próxima seção, como usar o Firebase para armazenar nossas imagens e também permitir que os usuários definam o estilo do texto. Eu vou vê-lo na próxima seção, onde até o final, você terá um aplicativo completo de cartão de felicitações totalmente funcional. 64. Introdução da seção: continuação de componentes e armazenamento do Firebase: Bem-vindo a esta nova seção, onde vamos continuar trabalhando com componentes. Nós também vamos estar integrando com o Firebase, Para armazenar nossas imagens carregadas. Há também muitas melhorias para fazer em nosso aplicativo, como permitir que os usuários estilizem textos no cartão, e também tornar as imagens arrastáveis para eles e reposicionar. Nós também aprenderemos algumas coisas novas, como usar o eventbus e também adicionar mixins também. Há muito para passar nesta seção. Então, vamos começar. 65. Configurando o Firebase: Nesta seção, vamos continuar com nosso aplicativo e permitir que os usuários carreguem imagens para exibir no cartão. Essas imagens precisam ser armazenadas em algum lugar. Para isso, vou usar o Firebase, que faz parte do Google. Usaremos um dos recursos do Firebase, que é o armazenamento. Embora possa ser usado para muito mais, incluindo bancos de dados e autenticação para plataformas como iOS, Android e web. Se você vai para o navegador da web e vai para o Google, vamos fazer uma pesquisa para o Firebase. Acesso atual ao Firebase em firebase.google.com, que é o resultado principal. Firebase é gratuito e tem limites de uso generosos para testar. Há planos de preços para, mas você só precisará deles se o aplicativo crescer para exigir isso. Se você quiser saber mais sobre o Firebase, sinta-se à vontade para olhar este site, e então eu vou começar indo para o console. Talvez seja necessário iniciar sessão no Google primeiro para chegar a este estágio. Por isso, iniciei sessão com a sua Conta Google. Se você tem um, se não, é simples configurar um. Basta seguir as instruções e, em seguida, clique em Ir para o console. Então, uma vez que você é levado para a tela, podemos clicar em Adicionar projetos e, em seguida, adicionar um nome de projeto, eu vou chamar meu Creative Cards App e, em seguida, selecionar seu país, clique em Criar projeto e Dê-lhes um momento para se prepararem. Então somos levados para uma tela de boas-vindas, e apenas como uma nota lateral, sites como esses têm o hábito de mudar layouts ao longo do tempo, então, se sua versão parece um pouco diferente da minha, não se preocupe, isso geralmente significa um link de botão ou menu foi movido, ambas as coisas geralmente funcionam da mesma forma. Então, para começar, podemos adicionar nosso projeto ao iOS, Android ou web, então vamos clicar em Adicionar Firebase ao seu aplicativo web. Nós meio que copiamos o conjunto completo de código, mas eu não vou, porque isso inclui uma tag de script para o Firebase, e eu vou adicionar o Firebase como um pacote npm, então não precisamos desta seção. Tudo o que precisamos é a seção inicializada de dentro do segundo script, então copiamos esta seção sem as tags de script, e então se voltarmos para o nosso aplicativo. Vamos criar um novo arquivo dentro de nossos projetos, e esse arquivo conterá todo esse código de configuração do Firebase. Eu vou chamar este Firebase Config, e isso vai ser criado na raiz de nossa fonte. Então abra um novo arquivo chamado firebaseConfig.js, dentro do arquivo vazio podemos colar na inicialização que acabamos de copiar do Firebase e salvar isso. Então, essas são as seções que precisamos usar o Firebase, ele contém nossa chave API exclusiva. Assim, o Firebase sabe quem está acessando as informações, juntamente com links para a localização de nossos projetos. Então precisamos adicionar o pacote Firebase ao nosso projeto com o Node Package Manager. Se você abrir o terminal, verifique se está na pasta do projeto se estiver usando um console separado. Se estiver usando o Visual Studio Code, basta ir até a parte inferior, e certifique-se de que o servidor está fechado pressionando Control C, então podemos instalar o Firebase usando npm install dash, dash, save, para salvar é como uma dependência, e o nome do pacote é simplesmente Firebase e pressione Enter. Então dê alguns momentos para instalar, não deve demorar muito. Uma vez feito, podemos passar para o arquivo package.json, e agora vemos dentro do objeto dependências, temos Firebase ao lado da vista. Então, a primeira coisa que agora precisamos fazer é importar Firebase dentro do arquivo firebase.config. Então, na parte superior, podemos importar o Firebase do Firebase e lembre-se, não precisamos adicionar o caminho completo do arquivo ao Firebase quando se trata de um módulo Node. Eu gosto de usar uma letra maiúscula para o nome do módulo, então eu vou mudar este apenas na parte inferior para corresponder. Agora temos o nosso arquivo de configurações também, abri-lo para adicionar isso à raiz do nosso projeto, que é app.vue. Role para baixo até as tags de script, e então podemos importar esta seção, então importe FireBaseConfig, então isso é. /FireBaseConfig.js. Para ter certeza de que tudo está configurado bem, provavelmente fará sentido agora iniciar o serviço, então vá até o terminal e execute o npm, execute o dev. Então podemos entrar no projeto, e podemos abrir o console. Então clique com o botão direito e inspecione. Se você entrar no console e você não tem setas vermelhas, este é um bom sinal de que tudo está funcionando bem, se você tiver quaisquer setas vermelhas, certifique-se de voltar e corrigi-los antes de seguir em frente. Isso é tudo o que precisamos agora para adicionar o Firebase ao nosso aplicativo. Ele não faz nada no momento, mas no próximo vídeo, vamos olhar para criar a imagem, fazer upload de componentes para enviar imagens de volta para o Firebase. 66. Criando o componente do ImageUpload: Felizmente, agora você deve ter o Firebase inicializado em seu aplicativo sem erros de console. Se fizer isso, estará pronto para criar a imagem com componentes de fluxo. Este componente será responsável por fazer algumas coisas. Você terá entradas de arquivo HTML para permitir que os usuários selecionem uma imagem de um sistema. Você também enviará a imagem selecionada para o Firebase. Você terá uma barra de progresso para mostrar o progresso do upload para o Firebase. Serão uma miniatura de pré-visualização da imagem. Também tem um bone para confirmar que queremos usar esta imagem selecionada. Então, finalmente, ele emitirá o nome da imagem selecionada para os componentes pai. Mais tarde, esse nome de imagem será passado para o componente de saída da imagem para baixar o arquivo do Firebase. Vamos começar criando os componentes. Então volte para os projetos. Em seguida, dentro da pasta do cartão, vamos criar um novo arquivo chamado upload de imagem. Com a extensão de visualização de pontos, o componente usará primeiro o cartão do arquivo. Vamos para a frente do cartão, importar e registrá-lo. No script, vamos copiar as instruções de importação e, em seguida, mudar para upload de imagem. O mesmo com o caminho do arquivo. Em seguida, registrou isso na parte inferior como um componente. Em algum lugar combinar CCIMageUpload. Agora podemos inserir os componentes como um elemento de onde quisermos. Quero colocar o meu logo após a primeira caixa de texto. Role de volta para cima até os modelos. Logo após este primeiro cc entradas de texto, eu vou adicionar CCImageUpload e a tag de fechamento. Eu também vou adicionar uma linha horizontal apenas para manter estes separados. Então guarde isso. Agora podemos adicionar algum conteúdo HTML dentro do arquivo componente. Vamos voltar para a imagem upload.view, e podemos adicionar nossos modelos. Novamente, com o nosso recipiente circundante, que é o nosso div, e vamos adicionar algumas classes bootstrap para o estilo. Isso vai ser uma linha, e vamos dentro desta div podemos adicionar uma segunda div, que vai ter a classe de col-sm-12 para fazer isso a largura total. Em seguida, queremos adicionar h4 com um texto de imagem de upload. Isso será exibido na parte superior da seção de upload. Você pode ver exatamente em qual seção eles estão. Então queremos adicionar outra div, que vai ser para o formulário. Esta div vai ter uma classe bootstrap de grupo de formulários. Então aqui dentro podemos adicionar nossas entradas de arquivo. Esta é a área que podemos selecionar um arquivo de todo o sistema para carregar para Firebase. O tipo de entrada é de arquivo, vamos adicionar alguns estilos de forma, arquivo de controle, também vai precisar do ID que vamos usar mais tarde de upload de arquivo. Após esta seção, vamos adicionar uma tag break. Basta adicionar um pouco de espaço. Em seguida, podemos adicionar para adicionar nossos elementos de imagem. Vou dar a isto uma identificação da imagem. O que é a fonte da imagem vazia? Porque tivemos isso mais tarde com JavaScript e vamos fazer isso no próximo vídeo. Este é efetivamente um elemento vazio até que uma imagem tenha sido selecionada usando a entrada. Então, finalmente, podemos adicionar um botão na parte inferior. Este botão vai ser usado para definir a imagem. Uma vez que o usuário possa ver a visualização, este botão pressionará a imagem do Firebase. Vamos adicionar um tipo, um tipo de botão de botão e também um ID que vamos usar mais tarde de definir botão de imagem. Então podemos adicionar as tags de script. Agora não há padrões de exportação. núcleo estava vazio por enquanto. Então, finalmente, nossas tags de estilo para finalizar esses modelos. Agora, se salvarmos isso e ir para o navegador, se não vemos erros, devemos agora ver os novos componentes na tela. Temos a vantagem para o título, temos a seção de upload de imagens, qual podemos clicar e escolher uma imagem de uma máquina. Nós também temos o botão de imagem set. Isto está tudo a funcionar bem. Se você não vir os componentes ou tem uma tela em branco, verifique se você chamar para quaisquer erros e também verifique o terminal e o console para quaisquer pistas de onde o erro pode estar. Esta é agora a configuração dos componentes básicos. Em seguida, continuaremos com esses componentes para exibir a miniatura da imagem e também permitir que a imagem selecionada seja enviada para o Firebase. 67. Fazendo upload de imagens ao Firebase: Agora configuramos o botão Componente, que permite ao usuário selecionar um arquivo de seu sistema. Também precisamos enviar essa imagem para o Firebase para armazenamento. Esta funcionalidade pode ser adicionada a um método que é chamado quando a entrada do arquivo é acionada. Podemos detectar isso com um manipulador de eventos onchange. Vamos adicionar isso em nosso modelo para o upload da imagem. Se você localizar as entradas de arquivo, vamos adicionar um manipulador de eventos onchange. Então use o at change e eu vou definir isso para um método chamado UploadFile. Agora podemos ir até o script e configurar nossos dados e métodos necessários. Dentro do Export Default, podemos adicionar nossa propriedade de dados apenas da maneira usual, e na propriedade de dados o que eu vou configurar é para o nome do arquivo. Inicialmente, esta será uma string vazia até que o usuário carregue uma imagem. Então, abaixo desta seção de dados, podemos configurar nossos métodos que acabamos de chamar UploadFile. Então configure os métodos e, em seguida, adicione o nosso nome método de UploadFile. Como este é um evento, temos acesso aos dados do evento passando um nome dentro dos parênteses. Isso pode ser um nome de sua escolha, mas vou chamar este evento de nome. Para começar, queremos pegar o arquivo selecionado e passá-lo para a nossa propriedade de dados de arquivo. Vamos fazer um log de console, e então podemos registrar o valor dos eventos e ver como podemos pegar esses dados de arquivo deste evento. Salve isso e, em seguida, se formos para o Console, clique com o botão direito do mouse em Inspecionar e, em seguida, vá para o Console. Vou fazer o upload de um arquivo com nossa seção de upload de arquivos. Para acompanhar esta parte, você precisa encontrar uma imagem, se você ainda não tem uma armazenada em seu computador, há muitos sites gratuitos disponíveis onde você pode baixar uma imagem para usar. Eu tenho um salvo na área de trabalho, então eu vou para a área de trabalho e clique em Beach.JPEG e, em seguida, clique em “Abrir”. Nada acontece ainda dentro do aplicativo, o que é bom. Mas no console temos o valor do evento. Aqui dentro você pode ver que temos os alvos, que podemos abrir, e então se rolarmos para baixo, precisamos procurar nossa lista de arquivos, então abrir isso. Se você clicar em zero, que é o primeiro item, podemos ver os detalhes do arquivo que acabamos de carregar. Podemos ver coisas como o nome, o tamanho e também o tipo de imagem. Estamos carregando apenas uma imagem de cada vez para que possamos sempre usar a posição zero. Agora sabemos onde os dados do arquivo são armazenados, podemos passá-lo para a nossa propriedade de dados de arquivo. Vamos passar para o método e remover o log do Console. Agora podemos selecionar esse arquivo ponto, que são nossos dados, e vamos definir isso igual ao event.target.files, e então, como acabamos de ver, precisamos selecionar a posição zero. Para enviar isso para o Firebase, precisamos adicionar uma referência de armazenamento do Firebase. Esta referência é o local dentro do Firebase onde deseja adicionar nossos arquivos. Nós configuramos a referência de armazenamento assim. Vamos selecionar firebase.storage.ref. Como estamos nos referindo aos métodos de armazenamento e ref que são partes do módulo Firebase, também precisaremos importar Firebase para o arquivo. Vamos fazer isso no topo do roteiro. Portanto, importe o Firebase do Firebase. No árbitro, vamos fazer duas coisas. Primeiro, dizemos ao Firebase o nome da pasta para armazenar as imagens. Se a pasta não existir no momento, ela será criada. Este é o primeiro argumento que é passado como uma string. Vamos criar um novo arquivo chamado user_uploads, seguido pela barra. Podemos então adicionar o caminho do arquivo depois dele. Nós adicionamos ao final deste o nome do arquivo, que temos atualmente como uma propriedade de dados. Nós vamos adicionar no final este.file.name. Este nome de pasta mais este nome criará o caminho do arquivo para armazenar a imagem dentro de um Firebase. Podemos então instalar esta linha de código dentro de uma variável chamada StorageReef. Agora temos a referência de armazenamento. Podemos chamar o método Firebase put, para realmente carregar a imagem para Firebase. Portanto, a imagem que você deseja adicionar é este arquivo.arquivo. Agora isso é configuração, podemos ir em frente e testar isso. Se voltarmos para o Firebase Console. Vá até Firebase e, em seguida, clique no Console para ser levado para esta página. Selecione o aplicativo Creative Cards e, no lado esquerdo, veremos a opção de armazenamento, clique nisso. Este é o conteúdo do nosso armazém. Atualmente não há imagens listadas aqui, então vamos dar uma chance. Se formos para o nosso aplicativo, podemos tentar enviar uma imagem para esta pasta. Selecione o Upload de imagem e, em seguida, escolha a imagem e clique em Abrir. Então vamos voltar ao Firebase e atualizar. Podemos ver depois da atualização que nada acontece. Ainda não temos imagens listadas no armazenamento. Se voltarmos para o aplicativo e abrirmos o Console, e vamos ver o que acontece aqui. Podemos ver que temos um erro no console. A razão pela qual obtemos esse erro é porque, por padrão, segurança do Firebase requer autenticação. Para os propósitos desta demonstração, eu vou desativar isso apenas para o nosso exemplo para que possamos nos concentrar em vista js. É claro que, para aplicativos de nível de produção, não devemos fazer isso. Para definir as regras como público, precisamos ir para a guia Regras e alterar isso. Selecione regras de dentro da seção de armazenamento, e então o que precisamos fazer é alterar a seção de gravação, e então precisamos alterar isso para permitir leitura e também escrever. Exclua isso e apenas deixe permitir ler, escrever e, em seguida, clique em “Publicar”. Ok, então agora vamos passar para o nosso aplicativo e, em seguida, atualizar e, em seguida, escolher Novo arquivo. Vou selecionar a imagem da praia novamente e clicar em “Abrir”. Isso é um bom sinal, não vemos nenhuma mensagem de erro no console. Vamos lá e depois vamos para os arquivos. Ok, ótimo. Agora podemos ver uma nova pasta foi adicionada chamada useruploads. Este é o arquivo que adicionamos dentro de nossa referência de armazenamento, e então podemos ir para o Firebase novamente e abrir esta pasta. Agora também vemos que temos o arquivo de Beach.JPEG adicionado. Se isso não funcionou instantaneamente para você, talvez seja necessário dar alguns momentos apenas para que as novas configurações entrem em vigor. Parabéns se conseguiu chegar ao palco. Esta é uma grande parte do nosso aplicativo cuidado. Agora vamos passar para o próximo vídeo, vamos adicionar uma miniatura de visualização de imagem para que o usuário possa ver qual imagem selecionou. 68. Miniatura de exibição da imagem: Estamos fazendo um bom progresso com o nosso cartão de saudação. O próximo passo que queremos dar é pegar os dados do arquivo de imagem, que agora recebemos, armazenados na propriedade de dados do arquivo, que está aqui, e exibi-los dentro de uma visualização de imagem na tela. Para fazer isso, vamos tirar proveito do objeto leitor de arquivos JavaScript. Usaremos o Leitor de Arquivos para ler o conteúdo do arquivo de imagem que fornecemos. Em seguida, passaremos os resultados dos eventos para a nossa tag de imagem como um atributo de origem dentro daqui. Então vamos dar uma olhada em como podemos usá-lo. Nós vamos adicionar isso dentro do nosso método de upload de arquivo. Portanto, certifique-se de que isso está dentro da base de código. Então isso significa que isso será acionado cada vez que um arquivo for carregado. Para ser capaz de criar um objeto de leitura de arquivo recém-construído, instale-o dentro de uma variável chamada reader. Então este é um novo FileReader. Então, dentro desta variável, podemos acessar um novo método chamado readAsDataURL. Este método lê o conteúdo do arquivo em que passamos para ele. Então o arquivo que queremos ler é este objeto de data aqui, que você pode acessar com este arquivo ponto. O manipulador de eventos A e onload, que também pode usar. Então reader.onload. Este evento onload aciona uma função. Cada vez que a operação de leitura tiver sido concluída com êxito, esta função tomará no evento como um parâmetro que contém os dados do arquivo. Desta vez eu chamei o evento E. Só não confundi-lo com o nome do evento que usamos antes. Então, aqui haverá bons lugares na fonte da imagem onde queremos exibir a miniatura. Nós já temos a tag de imagem dentro de nossos templates, que você acabou de aqui, que não tem atributos de origem. Em momentos. Podemos selecioná-lo pelo ID da imagem e definir as lojas de imagem para ser igual aos resultados de destino de eventos. Então, de volta para baixo, podemos selecionar esta imagem usando JavaScript. Então documents.getElementByID, e ID demos a imagem ou simplesmente imagem, e podemos usar fonte ponto para definir a fonte igual a esses eventos. Então faça isso com e.target.result. Para finalizar as coisas, podemos adicionar uma largura máxima a esta imagem para garantir que imagens grandes não mexam com o nosso layout. Então, dentro do mesmo arquivo, eu vou descer para as startups, e desta vez ele vai ser escopo, então só se aplica a esta final. Podemos então segmentar a imagem e, em seguida, definir a largura máxima da imagem para ser 200 pixels. Portanto, isto deve ser tudo o que precisamos fazer agora. Selecione iniciar o servidor se ele ainda não estiver sendo executado com o npm, execute dev. Uma vez que ele abre, devemos ser capazes de selecionar uma imagem de arquivo e ver aparecendo como uma pré-visualização. Alguém escolheu minha imagem de praia mais uma vez e abri-la. Ok, ótimo. Então, agora o leitor de arquivos está funcionando e podemos ver a visualização da imagem exibida na tela, definindo a fonte da imagem. Então, em seguida, vamos adicionar uma barra de progresso de upload de imagem, e também fazer esses dados de arquivo para os pais. 69. Barra de progresso de upload e dados de arquivo $emit: Agora podemos selecionar uma imagem do computador do usuário e fazer upload com sucesso para o Firebase. Além disso, temos uma pequena visualização de imagem abaixo do leitor de arquivos apenas aqui. Quero fazer duas coisas neste vídeo. Primeiro, crie uma barra de progresso HTML para exibir ao usuário o progresso do upload da imagem no Firebase. Manter o controle desse progresso de upload será importante mais tarde. Em seguida, em segundo lugar, queremos emitir o nome do arquivo para o componente pai. Isso também é importante porque quando criamos os componentes para exibir a imagem no cartão ali, precisamos passar o nome da imagem para ele através de adereços. Podemos baixar a imagem correta do Firebase. Começamos dentro do arquivo de upload de imagem adicionando os elementos de progresso HML dentro dos modelos. Vou adicioná-lo logo acima da tag break. Adicione uma barra de progresso. Então aqui dentro, vamos definir o valor inicial como zero. Este é o ponto de partida para a barra de progresso. Como queremos trabalhar como uma porcentagem, vamos definir o valor máximo para 100. Você também pode adicionar um ID da barra de progresso. Isso nos permitirá selecionar esses elementos mais tarde com JavaScript. Para fazer isso funcionar, então precisamos criar um manipulador de eventos alterado de estado no método put, que já temos. Deslocaremos para baixo até o método de upload do arquivo. Temos um método [inaudível] apenas aqui, que eu vou armazenar dentro de uma variável para que possamos acessar isso com o nome de Upload. Vamos usar essa variável para monitorar os eventos alterados de estado usando um observador de mudança de estado fornecido pelo Firebase. Ainda dentro deste método de arquivo de upload, vamos adicionar este observador. Eu só vou adicionar isso abaixo da função reader.onload. Podemos acessá-lo com este nome de variável de upload, que você acabou de dar, assim por diante. Em seguida, o primeiro parâmetro é estado alterado alarme. Isso é fornecido pelo Firebase. Isso será acionado cada vez que ocorrer uma mudança de estado. Isso chama uma função. Esta função recebe os instantâneos de tarefas. Este é um objeto fornecido pelo Firebase. O snapshot contém propriedades que podemos usar para monitorar o upload. No nosso caso, vamos usar os bytes transferidos e propriedades de bytes totais para criar a porcentagem do progresso. Em seguida, podemos armazenar essa porcentagem dentro de uma variável. Vou chamar isso de Progresso variável. Vamos acessar os instantâneos. A propriedade é bytes transferidos. Este é o número de bytes que estão sendo transferidos atualmente dividido pelos snapshots.TotalBytes. Este é o número total de bytes do arquivo. Vamos transformar isso em uma porcentagem. Nós multiplicamos isso por 100. Isso nos dará um valor entre zero e 100 e armazená-lo dentro de uma variável chamada Progress. Agora temos esse valor de upload como uma porcentagem. Podemos então enviar essas informações para a barra de progresso para atualizá-la. Para fazer isso, basta saber que é variável, eu vou acessar a barra de progresso com um document.getElementById. Obtemos a barra de progresso ou um id ou barra de progresso neste final da string. Então tudo o que eu quero fazer é definir o valor para ser igual a esta variável de progresso, etc Agora vamos para o navegador e verificar se isso está funcionando. Podemos ver todos os elementos do progresso. Agora vamos escolher um arquivo do carregador e selecione Abrir. Tão apaziguados, estamos trabalhando bem. Vemos que a alteração de estado de upload é causada em uma barra de progresso para aumentar. Tudo parece bom por enquanto. Ótima. Esta é a primeira parte concluída. Só agora precisamos do método emit, assim como fizemos anteriormente com os componentes de texto. Isso enviará o nome da imagem selecionada para os componentes pai. Vamos fazê-las agora. Na verdade, primeiro vou adicionar um comentário. Esta foi a resposta estabelecida para, seção é desligada com comentários apenas então vamos criar para mais tarde. Isso pode ser [inaudível]. Isto é para a barra de progresso. Agora role para baixo abaixo desta seção da barra de progresso. Vamos adicionar este $emits para enviar o nome da imagem para os pais. Vou chamar esse evento personalizado Exibir Imagem Alterada. Os dados que queremos enviar, novamente é este.file, que são esses dados aqui. Em seguida, podemos acessar o nome de um arquivo com.name. Este nome de arquivo agora é enviado para o arquivo pai, que é carfront.view. Precisa agora ir para este arquivo e adicionar uma nova propriedade de dados para armazenar o nome desta imagem. Dentro da seção de dados, separados por vírgula, podemos adicionar nosso nome de imagem. Isto vai ser inicialmente uma string vazia. Quando eu preciso ouvir os eventos no componente real no qual ele é passado, então eu preciso olhar para o upload de imagem cc imagem upload e, em seguida, ouvir os eventos. O evento foi chamado Imagem de Exibição Alterada. Agora podemos definir o nome da imagem para o valor dos eventos. O nome da imagem é igual a $events. Isto é tudo algo que já fizemos antes. É praticamente o mesmo que fizemos com as entradas de texto. Tudo o que estamos fazendo é passar o nome da imagem em vez do valor do texto. Vamos testar isso está funcionando. Precisamos produzir os dados do nome da imagem usando as chaves duplas. Vou fazer isso no lado da exibição de cartas por enquanto. Abra as chaves duplas e agora podemos colocar o valor deste nome de imagem e dizer isso. Vamos para o navegador. Agora, se escolhermos um arquivo, selecione a imagem. Ótima. Se tudo deu certo, veremos o nome da imagem que selecionamos saída no cartão. Este é um grande passo. Agora temos a imagem sendo empurrada Firebase. Agora temos a visualização da imagem aparecendo na tela. Também temos o nome da imagem que está sendo passada para os componentes pai. Agora, estamos prontos para passar a criar os componentes de saída de imagem, que irá exibir a imagem da seção de exibição única cartão. Começaremos com isso no próximo vídeo. 70. Componente de saída da imagem: Agora temos tudo o que precisamos para nos permitir criar os componentes de saída de imagem. Vamos realmente exibir a imagem sobre o cartão. Começamos da maneira usual criando os componentes de saída da imagem. Vou até o Visual Studio e vou adicionar esses componentes dentro da seção atual. Isto vai ser chamado ImageOutput.vue. Então vamos começar criando nossos modelos na parte superior e, em seguida, nossas tags de script, usamos por agora um padrão de exportação vazio. Então, finalmente, as tags de estilo e, em seguida, salvar isso. Então, uma vez que isso é feito, precisamos importar e registrar dentro do cardfront.vue. Lembre-se que o CardFront vai ser o recipiente, que contém todos os componentes de imagem e texto. Então, rolando para baixo até a seção de script, eu vou importar nosso ImageOutput de. /ImageOutput.vue. Então devemos ver um pouco de um padrão emergindo aqui. Se você olhar para a frente do cartão, temos o TextInput e TextOutput, seguido pelo ImageUpload ou ImageInput e, em seguida, também o ImageOutput. Então, colocando dados, passando-os para os componentes pai e, em seguida, passando esses dados para este filho como adereços. Agora vamos registrar isso na seção de componentes. Então eu vou chamar isso CCImageOutput, que é claro o ImageOutput que acabamos de importar. Isso agora significa que você pode colocar os componentes dentro de nossa localização selecionada, dentro da exibição do cartão. Então, dentro desta seção de exibição de cartão, eu vou remover as chaves duplas de antes e, em seguida, adicionar nosso ImageOutput. Assim como a área do editor, vou adicionar isso como o segundo componente. Então cc-image-output e a tag de fechamento. Em seguida, precisamos passar em alguns adereços. Primeiro o nome da imagem a ser baixada, que você armazena na imagem nome datas propriedade, que é apenas aqui. Vamos adicionar o primeiro adereço na etiqueta de abertura. Então use os dois pontos para vincular isso e vamos chamar isso de suporte de DisplayImage. Em seguida, transmita o valor de ImageName. Em seguida, o segundo adereço que vamos adicionar é também este recipiente alturas, que é exatamente o mesmo que o TextsOutput. Então desta vez eu quero que a imagem seja um pouco maior do que o texto, então eu vou definir isso para ser 350, então salve isso. Agora podemos ir para o ImageOutput e começar a trabalhar lá dentro. O modelo é bastante simples. No momento, só precisamos de um elemento de imagem para exibir esta imagem. Então vamos criar a div como o invólucro. Então dentro disso vamos criar nossa imagem e então não precisamos de uma fonte por enquanto. Tudo o que queremos fazer é adicionar um ID e definir isso igual a OutpUtimage. Então lembre-se que este componente está recebendo adereços, então precisamos ter validação de prop. No padrão de exportação, podemos adicionar nossos adereços aqui dentro. Então isso vai ser um objeto. Então o primeiro é para a imagem de exibição, que é o primeiro adereço que você passa para ela. Dentro daqui vamos definir isso para um tipo de string, em seguida, separados por vírgula. Nós também podemos adicionar o recipiente alto adereço. Este seria um tipo de número. Por padrão, também definiremos isso como um valor de 200. Agora o que eu estou colocado teste, estamos realmente recebendo esses adereços olhando saída a imagem de exibição dentro do modelo. Então abra as chaves duplas e, em seguida, produza a imagem de exibição, que é um prop que estamos recebendo do pai, que é apenas aqui. Dê um salvamento e vamos verificar isso no navegador. Escolha um arquivo e carregue a imagem. Então podemos ver o nome foi baixado e esta é uma sonda que está sendo passada para os componentes dos pais. Em seguida, vamos adicionar alguns estilos para corresponder à discagem da caixa de texto. Então, role para baixo até a seção inicial na parte inferior. Na verdade, queremos adicionar uma classe para o próximo fazer primeiro do recipiente de imagem. Podemos usar este alvo dentro da seção de estilo, so.image-container. Então aqui dentro nós vamos adicionar nossa borda que está indo para um pixel e pontilhado. Assim como a caixa de texto, o estouro pode ser oculto. Também uma margem de cinco pixels na parte superior e inferior e zero na esquerda e direita. Então, no momento, estamos recebendo o contêiner alto adereço, que nós fomos passados. Mas não estamos usando para definir a altura do contêiner. Se passarmos para o arquivo TextOutput.vue, definimos para obedecer propriedade computada para usar esse prop como objetos de estilo. O código dentro da saída da imagem será exatamente o mesmo, então eu poderia simplesmente copiar e colar esta seção computada. Em seguida, volte para o ImageOutputs.vue. Então podemos colar isso dentro de nossos objetos. Então localize a marca de adereços de fechamento e adicione uma vírgula e, em seguida, cole isso. Agora tudo o que resta a fazer é vincular o StyleObject ao contêiner div. Então vá até o contêiner circundante usando a coluna que combinamos os estilos dinâmicos e defina isso para nosso StyleObject, que é o valor computado que acabamos de adicionar, então salve isso. Inicie o servidor div e vamos carregar isso dentro do navegador. A primeira coisa que você verá se tudo está funcionando corretamente é que há um recipiente de imagem que é maior do que o contêiner TextOutput. Isso ocorre porque definimos a imagem para 350 pixels. Considerando que apenas definimos o recipiente para a caixa de texto para ser 130. Então também podemos ver se carregamos nossa imagem. O nome da imagem deve ser passado para o cartão através de adereços. Temos isto a funcionar correctamente, bem feito. Agora você está pronto para usar o nome da imagem para baixar e exibir a imagem no cartão. 71. Baixando imagens do Firebase: Muito bem para chegar a esta fase do curso. Já cobrimos muita coisa até agora, e espero que faça sentido. Se você ainda está lutando para entender certas partes, não se preocupe muito. À medida que você continuar com este curso, você terá muito mais chance de praticar. Você já abordou a maioria dos conceitos fundamentais do UGS. Neste vídeo, vamos baixar e exibir a imagem no cartão. Já, fomos passados o nome da imagem finalmente exibir imagem prop, que é apenas aqui. Dentro da nossa imagem, do nosso perfil. Podemos configurar uma propriedade watch para detectar alterações causadas quando o usuário carrega uma nova imagem. Rolando para baixo, eu só vou adicionar isso logo abaixo dos adereços. Vou adicionar a propriedade do relógio. Vamos assistir a esta propriedade de imagem de exibição. Adicione isso lá dentro. Aqui dentro queremos nos comunicar com o Firebase para baixar a imagem. Primeiro precisamos importar o Firebase para este arquivo. Logo abaixo da tag de script de abertura, vai importar o Firebase do Firebase. Em seguida, precisamos adicionar uma referência de armazenamento, assim como fizemos dentro dos componentes de entrada de imagem. Vá até o upload da imagem. Se você se lembrar, dentro desta seção de upload de arquivos, adicionamos uma referência de armazenamento que envia o nome do arquivo para o Firebase. Eu vou copiar esta linha de código e, em seguida, voltar para as saídas de imagem e adicionar isso dentro da propriedade watch. Isso vai criar uma variável chamada referência de armazenamento, que se refere a um arquivo dentro do banco de dados. Desta vez, em vez de empurrar este arquivo superior, queremos fazer referência a ele com esta imagem de exibição de ponto, que é um nome da imagem que passamos. Podemos então usar a referência de armazenamento com o método get download URL para buscar a URL para este arquivo. Logo abaixo, vamos acessar a referência de armazenamento que acabamos criar e, em seguida, ponto obter URL de download. Novamente, este é um método fornecido pelo Firebase. Este problema foi resolvido com êxito. Em seguida, atribuímos uma função de retorno de chamada para executar. Nós também precisamos passar no URL para o parêntese que acabamos de baixar. Agora temos a URL da imagem. Podemos adicionar o código para definir a fonte da imagem. Lembre-se que não temos uma fonte de imagem logo acima. Podemos acessar esta imagem através de seu id de imagem de saída. Dentro deste corpo, vamos criar nossa variável de imagem e definir isso para o id da imagem com document.getElementByID. O ID da imagem foi imagem de saída. Em seguida, podemos definir a fonte de ponto da imagem para ser igual a este URL, que será no passado. Dê um salvamento a isso. Este é um exemplo bastante simples para baixar a imagem. Podemos ir ainda mais longe adicionando o tratamento de erros também, mas eu não quero ir muito fundo no Firebase por enquanto. Salve isso e inicie o servidor de desenvolvimento e podemos verificar se isso está funcionando bem. Vá para os projetos escolha um arquivo. Ótima. Agora, vemos que a imagem foi baixada com sucesso do Firebase. Isto significa que o nosso código está bem confinado. No entanto, há um pequeno problema e se você não conseguir ver a imagem exibida no lado direito, você pode já ter experimentado isso. Se você carregou uma imagem pela primeira vez, talvez ela não apareça dentro do cartão. Vamos dar uma olhada no problema. Se passarmos por cima para escolher novo arquivo e ter uma nova imagem na área de trabalho, que ainda não está sendo empurrado para o Firebase. Se selecionarmos isso, veremos que isso não funciona. Quando selecionamos um arquivo de imagem para usar VUGS passagens nome de arquivo para os pais. Este nome de arquivo é passado para o componente filho, que então tenta baixar muito a imagem neste nome de arquivo. O problema é que isso acontece muito mais rápido do que o tempo necessário para carregar a imagem no Firebase Server. Isso significa [inaudível] que estamos tentando baixar uma imagem antes mesmo de ser enviada para o Firebase. Se já carregamos uma determinada imagem como a imagem da praia de antes, isso não causará nenhum problema porque a imagem já está disponível dentro do Firebase. Este é um problema que podemos resolver muito facilmente. Vamos dar uma olhada em fazer isso no próximo vídeo. 72. Definir o botão da imagem: Dentro do arquivo de upload de imagem dot vue, definimos um “botão Definir imagem” dentro de nossos templates. O objetivo deste botão é fazer duas coisas. Primeiro, ele permite que o usuário confirme se deseja usar esta imagem a partir da miniatura. Além disso, como mencionamos no último vídeo, estamos tentando baixar uma imagem antes que ele tivesse tempo para ser carregado para o servidor. Este botão também pode resolver este problema se usarmos um botão para emitir o nome do arquivo. Podemos ocultar o botão e torná-lo visível somente quando a barra de progresso estiver em 100%. Então podemos começar escondendo o botão até que uma imagem seja carregada. Isso pode ser feito com alguns CSS simples. Como um atributo, você vai adicionar a propriedade style e definir isso para exibir none. Agora devemos ver que o botão foi removido. Em nosso método de arquivo de upload, se localizarmos a função on load, e logo abaixo de onde atualizamos a barra de progresso, aqui dentro, podemos reintroduzir o botão quando o progresso do upload atingir 100%. Abaixo de onde obtemos a barra de progresso, podemos criar um if instruções para executar se o progresso for igual a 100 por cento. Então, se o progresso, que é essa porcentagem aqui, é igual a 100, e agora podemos usar um document.getElementById para selecionar este botão por seu Id. Então, de volta dentro da instrução if, podemos adicionar nossos documents.getElementByID e, em seguida, passar no botão Definir imagem Id, e, em seguida, podemos usar isso para reintroduzir o botão, definindo o tipo de exibição igual ao bloco inline-. Então lembre-se, por padrão, o modo de botão será exibido porque definimos a exibição para ser nenhuma. Em seguida, estamos observando abaixo para uma vez que o progresso atinge 100%, e, em seguida, uma vez que isso acontece, vamos então definir o tipo de exibição do botão para ser inline-block, que será exibido na tela. Então agora vamos salvar isso, e dar uma chance a isso no navegador. Não vemos o botão por padrão. Então, escolhemos um arquivo agora. Uma vez que a barra de progresso atinge 100%, agora vemos o botão Definir imagem novamente na tela. Agora, esse botão só aparece quando a imagem está totalmente carregada no Firebase. Agora podemos usar isso para acionar o método emit quando clicado. Então vamos voltar para o botão dentro dos templates. Em seguida, logo após a propriedade style, vamos adicionar um listener clique para acionar um método chamado Definir imagem. Em seguida, vamos configurar o nosso método Set Image abaixo. Então rolando para baixo, uma vez que você chegar ao final do método Upload File, que é apenas aqui, adicione uma vírgula, e então podemos adicionar nosso método Set Image. Então aqui dentro, tudo o que precisamos fazer é cortar esta linha de código que emite o nome do arquivo, e então mover isso para dentro do nosso método. Lembre-se de que o botão de envio desses eventos personalizados só aparece quando o progresso do upload é 100%. Portanto, agora é seguro enviar este nome de arquivo para o Firebase. Vamos economizar e testar isso. Se formos para o navegador, a primeira coisa que quero fazer é ir para o console Firebase. Então, vá até o Firebase, clique no console, selecione os cartões de criação e, em seguida, vá para o armazenamento. Vou excluir o arquivo de upload do usuário. Então, clique no botão à esquerda e, em seguida, selecione Excluir. Então agora não há imagens armazenadas dentro do banco de dados. Agora podemos ir para o nosso aplicativo, e testar selecionando uma nova imagem para verificar se ela está retida até que selecionemos o botão Definir imagem. Então vá para Escolher arquivo, e selecione um novo arquivo que não está dentro do Firebase , em seguida, Definir imagem. Então agora podemos ver que não temos o problema que tivemos no último vídeo porque não podemos baixar a imagem do Firebase até que ela esteja totalmente carregada agora. Então tudo isso funciona bem, tanto se usarmos uploads na imagem como acabamos de fazer, e depois clicamos no botão Escolher arquivo mais uma vez. Queremos que este botão Definir imagem desapareça novamente até que uma nova imagem seja totalmente carregada. Caso contrário, teremos o mesmo problema de antes. Então, podemos remover essa imagem imediatamente após o botão Escolher arquivo é clicado dentro do método de upload do arquivo. Vamos para o topo para o método de upload do arquivo e, em seguida, dentro aqui bem no topo, eu vou adicionar um document.getElementByID. Mais uma vez, agora vamos pegar o botão Definir imagem, e tudo o que vamos fazer é definir a propriedade style do style dot display igual a nenhum. Então dê um salvamento, e agora vamos testá-lo no navegador. Vamos selecionar nossa primeira imagem, depois definir isso. Agora, se clicarmos em Escolher arquivo, devemos agora ver que o botão Definir imagem é temporariamente removido. Então, selecione uma imagem e, em seguida, abra. Ótimo, você viu isso? Perdemos o botão de imagem até que o arquivo foi totalmente carregado. Então, tudo isso está funcionando bem. A imagem aqui no lado da exibição, pode ser um pouco grande demais ou muito pequena, mas não se preocupe com isso por enquanto. Vamos consertar isso no vídeo mais tarde. 73. Menu de opções de texto: tamanhos de fonte: Agora vamos voltar aos nossos componentes de saída de texto e adicionar um menu de opções. O menu aparecerá quando o usuário passar o mouse sobre o texto com o mouse sobre o lado direito para nos permitir alterar o tamanho da fonte, os alinhamentos de texto e até mesmo as opções em negrito ou itálico. Neste vídeo, vou começar configurando o menu para aparecer ao passar o mouse e também adicionar uma opção de tamanho de fonte. Então vamos começar criando nosso menu usando v-show para mostrar ou ocultar uma vez que você passar o mouse sobre esta área de texto. Então vamos passar para o nosso arquivo TextOutput.vue. Logo abaixo da div de abertura, vou adicionar um formulário. Este menu será formulário como ele é feito com entradas de formulário. Então eu vou adicionar uma classe, classe bootstrap de pequeno. Isso torna um formulário um pouco menor, então ele se encaixa melhor dentro da saída de texto. Então podemos adicionar nosso show em V. Portanto, queremos vincular isso para mostrar opções que ainda não foram criadas. Então eu vou apenas adicionar um texto simples dentro de tags P. Então nós apenas adicionamos teste lá dentro. Agora, abaixo dentro do nosso script, podemos configurar esta propriedade de dados ShowOptions. Nós rolamos para baixo e eu vou adicionar isso logo abaixo dos adereços, então adicione nossos dados. Eu tenho a vírgula de fechamento lá. Então isso vai retornar nossos dados ShowOptions. Então eu vou definir o valor inicial para ser verdadeiro apenas para ver se isso está funcionando bem no navegador. Ótima. Então agora temos o texto do teste aparecendo na parte superior de cada componente. Então, agora que sabemos que funciona, podemos mudar isso de volta para falso. Então só mostra cada vez que passarmos o mouse sobre a área. Agora ele foi removido. Então, para alternar a área ShowOptions, podemos adicionar alguns manipuladores de eventos do mouse se o usuário passar o mouse sobre a div de saída de texto. Então abra a div de abertura. Estou olhando para o avançado chamado mouseover. Assim, cada vez que o mouse passa sobre a área de texto, podemos definir ShowOptions para ser igual a true. Também podemos fazer o mesmo cada vez que o mouse sai, mas desta vez vamos definir as opções para ser igual a false. Eu vou salvar. Agora vemos que ele está oculto por padrão, mas se você passar o mouse sobre a área de saída de texto, podemos ver o texto está sendo exibido. Então agora com isso no lugar, podemos adicionar uma caixa de seleção para nos permitir escolher o tamanho da fonte, que queremos usar para o texto. Então volte para o formulário. Podemos substituir esta tag P por uma área de seleção. Vou começar com um rótulo para esta área selecionada. Então rótulo para SelectBox. Então eu vou para um título de tamanho de fonte. Vamos arranjar espaço. Em seguida, vamos adicionar o nosso SelectBox logo abaixo deste rótulo. Então, nesta área de seleção, eu vou substituir este nome por uma classe Bootstrap de seleção personalizada. Dê a este um ID de SelectBox, que corresponde ao rótulo logo acima. Dentro daqui podemos adicionar nossas opções, e cada uma dessas opções será um valor de pixel diferente para o tamanho da fonte. Então o primeiro que vamos adicionar como 42 pixels com o texto de 42 pixels. Então vamos copiar e colar isso para adicionar algumas opções mais avançadas. Então nós vamos adicionar quatro opções lá. O segundo de 48 pixels, o terceiro como 56 e, finalmente, o maior de 64 pixels. Então salve isso e vamos ver como isso parece no navegador. Então, agora, se passarmos o mouse sobre a saída de texto, podemos agora ver que temos as opções para selecionar os tamanhos de fonte. Agora precisamos de uma maneira de usar esse valor selecionado nas placas como um tamanho de fonte. Acontece que já temos algumas dessas configurações. As tags P, que exibem o texto que queremos modificar, já tem um objeto de estilo vinculado a ele. Por isso, podemos simplesmente acrescentar a isto. Primeiro precisamos adicionar uma propriedade de dados e eu vou chamar isso setFontSize. Então, role para baixo até os dados e separados por uma vírgula adicione uma nova propriedade de dados de setFontSize e defina isso como uma string vazia para começar. Podemos então adicionar isso para as entradas selecionadas usando V-model. Então role de volta para a tag de seleção de abertura e logo após o ID, eu vou adicionar V-model e definir isso para ser setFontSize. Com essa configuração de vinculação de dados bidirecional, a propriedade de dados setFontSize será definida para o valor selecionado. Agora podemos passar o valor selecionado para o objeto de estilo, que já temos. Então, role para baixo até o objeto de estilo, que está na seção computada. Em seguida, podemos definir a propriedade tamanho da fonte. Como este é JavaScript, ele precisa se tornar um caso. Vou definir este tamanho de fonte para ser igual a este. e deseja a opção de dados de SetFontSize. Então, porque isso é apenas receber um número quando isso adiciona pixels, mais uma vez, a isso vamos torná-lo um valor CSS. Então agora isso deve ser feito. Então eu vou salvar. Agora devemos ser capazes de tentar isso no navegador e ver se ele muda o tamanho da fonte. Então vamos adicionar algum texto para isso e passar o mouse sobre e alterar o tamanho da fonte. Isso parece bom. Ótima. Isso parece funcionar e cada vez que eu clicar em um tamanho diferente, agora vemos que o texto é alterado. Então isso está funcionando muito bem por enquanto. Então, em seguida, vamos continuar com este menu adicionando as opções de alinhamento de texto. 74. Menu de opções de texto: alinhamento de texto: Nosso menu está aparecendo agora quando o mouse sobre o texto, e nós também adicionamos com sucesso uma entrada de seleção para alterar o tamanho da fonte. Agora podemos continuar com o menu e adicionar mais algumas opções. Botões especificamente livres para definir o alinhamento do texto. Ele seguirá um processo semelhante à caixa de seleção, mas desta vez vamos usar botões de opção. Se você se sentir confiante, eu encorajaria você a ir em frente e dar uma chance por conta própria antes de seguir junto comigo. Se não, eu vou ir em frente agora e fazer isso sobre dentro do arquivo de saída de texto. Faça backup para os modelos na parte superior. Se procurarmos a opção de seleção de fechamento, vamos criar algum espaço e garantir que isso ainda esteja dentro do formulário. Eu vou começar adicionando um div, então nós vamos adicionar algumas classes bootstrap para fazer isso parecer um pouco mais agradável. O primeiro vai ser verificação de formulário, em seguida, também formulário de verificação em linha. Em seguida, podemos pedir o rótulo também a classe bootstrap do rótulo de verificação de formulário. Então dentro disso, de fato, podemos adicionar nossa entrada entre o rótulo. A entrada vai ser o tipo de rádio. Algumas classes para styling ou formulário verificar entradas e, finalmente, você pode adicionar um valor. O primeiro que eu vou definir para a esquerda, então este é para o alinhamento esquerdo. Vou copiar esta seção de div completa e colar mais duas vezes. O do meio será alinhar o texto no centro e o último será para o alinhamento esquerdo e logo após a entrada, vamos adicionar o texto. O primeiro é à esquerda, centro e depois à direita. Então, assim como fizemos com a caixa de seleção, também podemos configurar uma propriedade de dados para passar o valor selecionado. Voltar para o script, logo abaixo do tamanho da fonte definido, que usamos no último vídeo, vamos fazer o mesmo aqui, mas desta vez definir a linha de texto. Esta vai ser uma string vazia para começar e também vai passar alguns dados para isso. Agora temos a nossa propriedade de dados que podemos configurar a ligação de dados bidirecional usando modelo V, então backup para as entradas. Primeiro de tudo, vamos adicionar V-model como um atributo para a seção esquerda. V-model isso vai ser conjuntos text-align. Isso será o mesmo para todas as três entradas, então podemos adicionar isso como um atributo para o centro e também para a direita. Certifique-se de que a ligação de dados bidirecional está toda definida para a mesma propriedade dates. Isso configura, defina o texto alinhado com o valor do nosso osso de rádio, que você adicionou aqui, que você pode então passar para nossos objetos de estilo. Rolando para baixo, vamos dar uma olhada no objeto de estilo dentro da seção computada. Vamos fazer o mesmo que fizemos antes com o tamanho da fonte definindo o text-align e isso vai ser this.set text-align. Isso é tudo o que precisamos fazer, para que possamos ir até o navegador e verificar se tudo está funcionando. Adicione alguns textos aqui e, em seguida, passe o mouse sobre o centro, a direita e a esquerda. Bem feito se você conseguiu fazer isso sozinho, se não, tudo bem. Tudo isso agora está funcionando, então agora pode passar para o próximo vídeo e completar esta seção do menu adicionando as opções em negrito e itálico. 75. Menu de opções de texto: estilo e peso da fonte: Agora é hora de terminar nosso menu de focalização adicionando opções para alterar o texto para ser negrito e itálico. Podemos usar os botões de rádio como fizemos no último vídeo, porque queremos ser capazes de selecionar tanto o negrito como o itálico ao mesmo tempo. Os laços de rádio só permitem um desses que selecionamos. Em vez disso, podemos conseguir isso usando caixas de seleção. Vamos para o arquivo TextOutput.vue. Podemos adicioná-los logo abaixo da seção de alinhamento de texto, que está logo acima da tag de formulário de fechamento. Vamos começar criando nossa div. Vamos adicionar algumas classes a esta div circundante. A primeira classe vai ser todo formulário de verificação, e também form-check-inline. Também podemos adicionar o nosso rótulo. Eu só vou adicionar algumas classes a este de form-check-label, Eu vou adicionar nossa entrada. Lembre-se que este vai ser o tipo de caixa de seleção, e nós também vamos adicionar algumas classes para torná-lo bonito de form-check-inputs, e essas todas as superfícies Boucher. Logo após a entrada, vamos adicionar o nome de bolds. Este é um texto que aparecerá ao lado da caixa de seleção. Este é um para negrito, nós também precisamos de um para itálico. Copie esta div completa e, em seguida, acelere logo abaixo. Podemos usar as mesmas classes, form-check-inline para a entrada. Esta é também uma caixa de seleção, mas com o nome Itálico. As caixas de seleção funcionam um pouco diferente das ligações de rádio. Antes com ligações de rádio, definimos nossa propriedade de dados com um valor específico, como esquerda ou direita. As caixas de seleção retornarão um valor booleano de true ou false quando marcada ou desmarcada. Se formos para o nosso texto que tem o objeto de estilo vinculado, que é apenas aqui. Podemos usar este verdadeiro ou falso conjuntos de valores ou no local uma classe CSS, que irá vincular. primeiro configura as propriedades de data para negrito, itálico. Ambos inicialmente serão definidos como false. O texto é padrão para começar. Vá até os dados, e vamos adicionar uma vírgula. O primeiro é o que chamamos SetBold com um valor inicial de false. Em seguida, adicione uma vírgula no final, e podemos definir, SetItAlic também para o valor inicial de false. Em seguida, podemos usar o modelo para vincular esses dados com as caixas de seleção. Faça backup para as caixas de seleção. Vamos adicionar modelo vue para a entrada para configurar ligação de dados bidirecional. Este primeiro vai ser os dados SetBold. Então, é claro, as segundas entradas para itálico, vamos definir isso para ser SetitAlic. Podemos verificar se esses dados são alterados ao ser rastreados pela saída do valor dentro das chaves. Logo após o texto em itálico, vou configurar as chaves duplas. O segundo é definido em itálico. Eu vou fazer o mesmo para SetBold. Agora tinha sobre o navegador, e se você passar o mouse sobre o nosso menu, vemos um extra negrito e itálico, temos os valores iniciais de false. Primeiro, vamos verificar em negrito. Bom começo muda para verdadeiro e, em seguida, volta falso e também o trabalho itálico também. Isso significa que a propriedade de dados está sendo atualizado com o modelo vue. Agora podemos ver que as caixas de seleção estão configurando nossos dados corretamente. Comece a mover chaves em primeiro lugar, alguns dos SetBold, e também SetTitAlic. Em seguida, podemos usar este valor booleano para vincular às nossas classes. Assim como eu mencionei antes, se descermos para o texto P, que atualmente tem as ligações de estilo, também podemos adicionar um segundo atributos para vincular a classe. Isso também vai ser um objeto. Dentro deste objeto, vamos adicionar a primeira propriedade de negrito. Esta será a nossa propriedade de dados de setBold e separada por uma vírgula. Também faremos o mesmo para itálico. Esta é a nossa propriedade de datas definidas lá dentro. Quando definir negrito é verdadeiro, você aplicará a classe negrito. Quando definido itálico é definido como true, ele irá definir a classe itálico. Agora, nós só precisamos definir nossas classes negrito e itálico dentro do CSS e então nós devemos ser feito. Role para baixo até estilos. Começaremos com a turma ousada. Eu quero fazer aqui é definir o peso da fonte para ser negrito, e também o mesmo para um itálico, foi no estilo forma desta vez para ser itálico. Salve e, em seguida, vá para o navegador e, em seguida, passe o mouse sobre o menu. Na verdade, primeiro, vamos adicionar algum texto. Você pode ver os estilos aplicados. Passe o mouse sobre o menu e vamos começar com negrito. Bom. Podemos ver que o texto está alternando entre negrito e padrão. Vamos tentar itálico. Bom, os estilos agora estão aplicando no texto. Se você abrir as ferramentas div, clicamos com o botão direito do mouse e inspecionamos e, em seguida, selecione o texto de saída. Agora, se verificar negrito. Agora podemos ver que a classe de negrito foi aplicada dentro das Ferramentas do desenvolvedor. Vamos fazer o mesmo para itálico, e então vemos a classe de negrito e itálico aplicação e uma vez que ele é adicionado como um atributo, esses estilos negrito e itálico, em seguida, entram em vigor. Tudo o que resta a fazer é adicionar um pouco mais de estilo. Principalmente para garantir que uma vez que você passar o mouse sobre o menu, ele não empurra para baixo este texto se. Queríamos realmente aparecer sobre o texto se, em vez de empurrá-lo para baixo como ele provavelmente faz. De volta aos estilos. Eu vou com o formulário. Vamos definir a posição para ser absoluta. Vamos adicionar uma borda apenas na parte inferior e eu quero definir isso para ser um pixel pontilhado e uma cor cinza. Vou adicionar alguma margem ao topo de 10 pixels. Um pouco para o fundo de cinco pixels, e, em seguida, também alguns Padian apenas na parte inferior. Também cinco pixels. Mantenha-nos longe da borda. Só para terminar isso, eu vou adicionar apenas um pouco de estilo para a caixa de seleção. Tudo o que quero fazer é definir a altura para 40 por cento, apenas para torná-lo um pouco melhor. Dê um salvamento a isso. Agora, vamos ver como ele fica no navegador? Bom. Agora, quando eu passar o mouse sobre o menu, vemos que o contêiner de texto não é mais empurrado para baixo. O menu agora fica bem em cima da div. Vou ver como vamos olhar com algumas mensagens. Bom que, obviamente, está funcionando bem. Nosso menu de focalização agora está completo. Agora podemos passar a adicionar alguns toques finais aos nossos componentes de imagem. 76. Remover o botão de imagem: Nos próximos vídeos, vou adicionar alguma funcionalidade extra para finalizar nossos componentes de imagem. Para começar, quero adicionar um botão que aparece quando o usuário passa o mouse sobre a imagem para permitir que a imagem seja removida. Assim que você mover isso, definiremos uma imagem de espaço reservado padrão no cartão. Vá até o arquivo.vue de saída da imagem. Podemos adicionar um botão com algum estilo bootstrap. Logo após a div de abertura inicial, eu vou adicionar um botão dentro daqui com o texto de remover imagem. Em seguida, dentro da tag botão de abertura, vai adicionar alguns atributos, vai começar com o tipo e definir este será botão. Em seguida, algumas classes bootstrap para aplicar algum estilo. Primeiro de tudo, BTN, em seguida, BTN contorno perigo e isso adiciona uma borda vermelha para o botão. Então, finalmente BTN-SM, para tornar o botão um pouco menor. Além disso, assim como as opções de texto, eu vou adicionar visual, para mostrar apenas o menu ao passar o mouse. Dentro daqui, eu vou criar uma opção de data chamada show options e, em seguida, vamos descer para a nossa instância view e criar isso. Logo abaixo dos adereços, podemos adicionar nossa seção de dados. Não se esqueça de adicionar o coma logo depois. Então podemos devolver nossos dados. A propriedade data que criamos foi chamada show options e que é inicialmente define show options como false. Em seguida, podemos definir isso como true uma vez que o usuário passa o mouse sobre a imagem. Fazemos isso adicionando alguns eventos do mouse. Vamos voltar para o modelo e adicionar um mouseover, um mouse deixar eventos. Vou adicionar isso na div de abertura, logo após o objeto de estilo vinculado.. Vamos começar com o mouse sobre. Quando o usuário adiciona o mouse sobre a imagem circundante, div, vamos então definir mostrar opções para ser verdadeiro e isso irá, em seguida, acionar V Mostrar e ativar botão para exibir. Em seguida, adicionaremos o mouse deixar pelo oposto uma vez que o mouse é movido para longe do contêiner de imagem. Desta vez, as opções de show estão definidas como false. Então diga isso e podemos testar isso funciona bem no navegador. Agora mova o mouse sobre a seção de imagem e vemos o botão foi exibido. Então, se afastarmos o mouse, o botão não será removido. Finalmente, para ter certeza de que o botão fica no topo da imagem, em vez de atrás dele. Também podemos configurar alguns CSS. Então volte para o arquivo superior da imagem. Podemos fazer isso na seção de estilo na parte inferior. Podemos adicionar alguns estilos ao botão. Primeiro de tudo, vamos definir a posição para ser absoluta e, em seguida, o índice Z para ser um valor de um, para habilitar o botão para sentar em cima da imagem. Mesmo, vamos apenas verificar isso no navegador. Isso ainda parece bem. Com o nosso botão agora no lugar, podemos usá-lo no próximo vídeo para remover a imagem. 77. Passando dados com retorno de chamada: Já examinamos a comunicação pai-filho do componente. Sabemos que um pai passa dados para uma criança através de adereços, e também uma criança passa dados para o pai com um evento personalizado. Há uma alternativa também, que queremos torná-lo ciente, e isso é usando funções de retorno de chamada. Vou demonstrar isso com um botão que foram adicionados no último vídeo. Funciona um pouco diferente de emitir eventos personalizados. Desta vez, precisamos adicionar a funcionalidade dentro dos componentes pai, então, precisamos criar um método de imagem clara dentro de cardFront.vue, então, vamos passar para o CardFront, e então abrir isso, e então podemos ir até o seção do método. Na verdade, precisamos criar isso. Eu só vou adicionar isso depois da seção de dados, então, adicione isso lá com a vírgula para separar. Vou adicionar o método de CleariMAGE, e isso, é claro, será usado para remover a imagem da tela. Quando começamos a acionar esse método, queremos que ele substitua a imagem atual por uma imagem de espaço reservado padrão, então, o cartão não parece tão ruim. Você pode usar uma imagem existente que você já tem dentro de um Firebase ou pode adicionar uma nova. Vou até o Firebase console e adicionar uma imagem padrão, então, abra o Firebase console, abra nosso aplicativo, selecione Armazenamento e há nossos carregamentos de usuários. No momento, eu só tenho a imagem beach.jpg dentro de lá. Vou passar por cima para fazer upload do arquivo e selecionar o arquivo da minha área de trabalho, então, eu vou selecionar este com o nome de Sea. Agora, eu vou copiar o nome desta imagem, então, copie o nome desta sobre a que você acabou de enviar, ou uma imagem existente que é da sua lista, e agora podemos usar este nome para definir a nossa imagem nome data propriedade. Para fazer isso, selecionamos isso com this.ImageName, que é esse valor apenas aqui, e agora eu vou definir isso para um valor de string do nome da imagem. Com essa configuração, agora podemos passá-lo como um adereço para os componentes filho ImageOutput. Rolando de volta para cima, podemos procurar o cc-image-output, que está aqui, e agora podemos adicionar um terceiro adereço. Lembre-se de usar os dois pontos, e chamar este CleariMageProp, e isso vai ser igual a CleariImage, que é o nome do método que você acabou de configurar aqui. Em seguida, no arquivo ImageOutput, agora podemos adicionar isso à nossa lista de adereços, então, vá para ImageOutput.vue, e, em seguida, até a seção de script, vamos localizar os adereços. Vamos configurar isso como uma função validada e podemos adicionar isso ao final, logo após ContainerHeight. O nome do prop era CleariMageProp. Vamos definir isso para ser o tipo de função, em seguida, para acionar essa função a partir deste componente filho, podemos chamá-la com um ouvinte de clique no botão, então, role de volta para o botão dentro dos templates. Então logo após v-show, nós também vamos adicionar um ouvinte de clique, em seguida, dentro aqui, nós podemos adicionar o nome de CleariMageProp e dar que um salvamento. Agora, se formos para o navegador, e então abrirmos nosso projeto. Vamos ver se está funcionando. Se enviarmos nossa imagem de praia, em seguida, clique em abrir, e, em seguida, definir isso. Agora, se eu passar o mouse sobre e selecionar o botão, você deve então acionar este método de retorno de chamada para, em seguida, definir a nova imagem padrão com o nome que você passou para ela, que estava apenas aqui. Antes de encerrarmos este vídeo, há mais uma coisa a considerar. Nós só queremos definir esta imagem padrão se o usuário já tiver adicionado a sua. Se tivermos uma tela em branco, não queremos permitir que o usuário clique em remover. Tudo o que precisamos fazer para cobrir este caso, é adicionar if declarações dentro do método, para verificar se os dados do nome da imagem não estão vazios. De volta ao CardFront, se você for para o método de imagem clara, logo acima disso, podemos adicionar uma instrução if. Então, se this.ImageName não é igual a uma string vazia, então, em outras palavras, se houver uma imagem presente, então podemos ir em frente e definir this.ImageName como este nome padrão que acabamos de passar. Vamos tentar isso. Se atualizarmos, e agora se clicarmos no botão remover, veremos que nenhuma imagem está sendo baixada. Esta é uma maneira alternativa de se comunicar entre componentes. Ainda temos a questão de nossas imagens não se encaixarem corretamente no contêiner. Vamos corrigir isso no próximo vídeo e também tornar as imagens arrastáveis, que o usuário possa movê-las para onde quer que elas apareçam. 78. Tornando as imagens arrastáveis: Toda a funcionalidade de imagem está quase no lugar agora. Um dos problemas, como mencionamos, é se você carregar uma imagem, que é maior ou menor que o Cal Container, ela não parece muito grande. Podemos adicionar jQuery em nosso aplicativo, para facilmente tornar nossa imagem arrastável, pelo usuário. Se você não está familiarizado com jQuery, é uma biblioteca JavaScript que nos permite adicionar facilmente recursos, como manipulação DOM, animações e manipulação de eventos, para citar alguns. Além disso, há também o jQuery UI Library, que adiciona a funcionalidade da interface do usuário, como efeitos e interações. Esta será a biblioteca que nos dá o recurso arrastável. Vamos começar por vincular nosso projeto ao jQuery. Eu fui ao Google, fui procurar o jQuery Google CDN. O que precisamos são essas bibliotecas hospedadas, então eu vou clicar sobre isso. Aqui a partir do menu à direita, primeiro precisamos pegar o recall jQuery, clicamos na banda jQuery. Vou copiar a versão mais recente gratuita e adicioná-la ao, /index.html. Vamos copiar as tags de script para a versão três e, em seguida, passar para o /index.html, e podemos adicioná-las logo após as fontes do Google. Colar eu entro. Em seguida, podemos selecionar o link jQuery UI. Clique na interface do usuário jQuery, para que os emoticons copiem o script e não as folhas de estilo. Copie a seção de script da abertura para a tag de fechamento, e depois cole isso, apenas explodiu o jQuery, recall. Isso é importante, ele deve ser colocado abaixo do recall jQuery, para que ele funcione, correto. Dê-lhes um salvamento e, em seguida, se passarmos para os componentes de saída de imagem, podemos configurar isso. Role para baixo até a parte inferior do script, localize a tag de script de fechamento e verifique se esse código está fora da incidência JS da exibição. Sob apenas ver código JS, eu vou adicionar uma função JavaScript chamada, SetDraggable. Isto é apenas JavaScript simples. Nesta função precisamos pegar a imagem que queremos arrastar, por seu ID, para que a imagem tenha um ID de saída imagem, que você pode ver apenas aqui. De volta à nossa função. Dentro de um corpo de função, podemos usar o símbolo $. Usamos este símbolo $ em jQuery, para selecionar um elemento, em vez de usar JavaScript baunilha, como document.getElementById. Dentro dos colchetes, podemos adicionar isso como uma string, então você vê '#' porque é um ID, e o ID foi imagem de saída. Em seguida, adicionamos /.draggable aos elementos selecionados. Tudo o que resta agora é chamar a função SetDraggable, onde precisamos. Vou adicionar esta chamada de função, dentro da tela do observador de imagens, logo após a Fonte da Imagem. Se deslocarmos para cima até a imagem de exibição, e isso está dentro da seção de relógio. Logo abaixo da Fonte de Imagem, podemos adicionar esta chamada à função, de SetDraggable. Esta é a nossa funcionalidade arrastável agora configurada. Vamos ver se está funcionando bem no navegador. Dê essa economia em sua cabeça sobre o Chrome, projetos de códigos de barras e, em seguida, precisamos selecionar uma imagem e, em seguida, clique em Definir imagem. Uma vez que ele carrega, tentamos clicar na imagem que você pode agora, arraste a imagem ao redor da seção, e vamos terminar isso com um pedaço de CSS. Se voltarmos para os componentes superiores da imagem, e rolar para baixo logo abaixo do botão, selecione a imagem e, em seguida, todos querem fazer, é definir a largura da imagem como um 130 por cento. Isso faz com que a imagem um 130 por cento do contêiner, e eu adicionei isso em por duas razões. Primeiro, ele lida com o problema das imagens serem muito maiores, ou muito menores do que o contêiner. Em segundo lugar, tornando a imagem um pouco maior, do que o recipiente. Ele dá ao usuário alguma liberdade extra ao arrastar a imagem ao redor. Isso agora é feito com os componentes de imagem e texto, agora podemos ir em frente e adicioná-los ao resto do cartão. 79. Finalizando o componente CardInsideLeft: A transação de cartão em que temos trabalhado até agora está concluída. Agora podemos reutilizar um texto e componentes de imagem para juntar os diferentes lados do cartão começando com o interior esquerdo. O interior esquerdo é uma seção simples que tem uma entrada de texto e uma saída de texto de altura completa para que o usuário possa adicionar um bloco de texto no cartão dentro do arquivo esquerdo. Dentro da seção atual, tudo o que temos até agora são os contêineres e algumas classes. Como estamos usando os componentes de entrada e saída de texto, podemos começar importando-os para que possamos usá-los dentro deste arquivo. Abaixo no script, podemos adicionar nossa importação. O primeiro é as entradas de texto e arquivo puff é. /TextInputs.vue. Também podemos fazer o mesmo para as saídas de texto. Importe a saída do texto. Os elementos componentes são os mesmos que frente do cartão para que possamos copiar e colar isso em nossas placas internas da mão esquerda. Vá para a frente do cartão e, em seguida, até os modelos. Primeiro de tudo, eu vou selecionar o cc-text-inputs e, em seguida, trazer isso para o cartão dentro da esquerda. Agora podemos remover o texto da parte superior e, em seguida, colar no cc-text-inputs. Também podemos fazer o mesmo com a saída de texto, então copie isso da frente do cartão. Vou copiar este primeiro e, em seguida, adicionar isto dentro do lado de exibição do cartão. Os componentes de saída serão a altura da placa, que é de 800 pixels. Vou definir a altura do recipiente para 750. Isso é tudo que pode permitir um pouco de pódio. Agora há os dados a serem adicionados para nossos valores de caixa de texto. Nós só temos uma entrada de texto para que a única propriedade de dados que precisamos adicionar é o valor da caixa de texto 1. Acaba com as importações, podemos configurar os nossos dados. Vamos adicionar o padrão de exportação e, em seguida, nossos dados. Vamos retornar o valor da caixa de texto 1. Assim como fizemos anteriormente, vamos definir isso para um valor inicial de uma string vazia. Então, finalmente, também precisamos registrar nossos componentes para torná-los disponíveis neste arquivo, então logo abaixo dos dados, então logo abaixo dos dados, adicione vírgula e, em seguida, podemos adicionar nossos componentes. Precisamos adicionar as entradas de texto cc, em seguida, adicionar uma vírgula. Nós também podemos fazer o mesmo para as saídas de texto cc, e salvar isso. Vamos agora abrir isso no navegador e ver como ele está. Se formos para dentro à esquerda, podemos ver que temos nossos componentes de texto à esquerda, e podemos ver que temos a borda pontilhada para as saídas à direita. Alguns dos estilos estão faltando, então podemos precisar ir para a frente do cartão e, em seguida, ir para baixo para os estilos e remover a seção de escopo. Isso então se aplica a todas as seções atuais, mas dentro da esquerda. Agora podemos ver que temos os mesmos estilos que a frente. Parece que está tudo funcionando bem, só precisamos digitar alguns textos. Podemos ver todos aparecendo na seção de saída. Se o seu é assim, agora estamos prontos para passar para a seção interna direita. 80. Finalizando o componente CardInsideRight: Agora, vamos passar para o lado de dentro à direita do cartão. Isto deve ser bastante simples, já que já fizemos a maior parte do trabalho. Nós só precisamos adicionar as três entradas de texto e componentes de saída para tornar isso aberto como podemos ver aqui. É praticamente uma repetição do interior esquerdo, mas precisamos adicionar três componentes e também três propriedades de data também. Vamos para o cartão lá dentro, à direita. Atualmente, temos apenas o texto do cartão dentro da direita. Eu vou para a seção interna esquerda, que nós adicionamos no último vídeo, “Command” ou “Control A ” para copiar tudo e, em seguida, ir para o interior direito e, em seguida, colar isso no lugar dos dados atuais e, em seguida, nós podemos duplicar a entrada de texto mais duas vezes, então copie isso e cole-o em mais duas vezes. A única diferença é que precisamos que a caixa de texto seja value2 e, em seguida, value3. Além disso, o mesmo para o TextOutput, tem que “Copiar” e, em seguida, colar isso em mais duas vezes, alterando o valor TextBox para ser um, dois e, em seguida, três. Então eu vou definir o ContainerHeight para ser a altura de 240, então todos os três podem caber no cartão e, em seguida, agora para baixo para os dados, nós já temos nossos componentes de entrada e saída de texto. Ambos em importados, então isso é bom, mas eu preciso retornar um TextBoxValue2 e também três. Nós já temos os componentes configurados, então tudo o que precisamos fazer é salvar e ver como ele está olhando no navegador. Esta é a frente. Mova para a direita interna, então nós temos os três componentes, então caixa um, caixa dois e caixa três e nós também podemos ver uma vez que você passar o mouse sobre todos os três, eles ainda terão o menu individual para cada um. Como estes têm a própria propriedade de datas, todos eles funcionam de forma independente, modo que as opções de menu só se aplicam à seção. Esta é agora a frente do cartão, o interior esquerdo e dentro direita concluída, que nos deixa com apenas uma volta para completar e vamos fazer isso no próximo vídeo. 81. Finalizando o componente CardBack: Estamos chegando ao final do projeto, tão bem feito por chegar tão longe. A parte de trás é o último lado do cartão que precisamos terminar, e ele ficará assim. Novamente, deve ser simples porque já completamos os componentes que compõem isso. Precisamos adicionar o upload e as saídas da imagem, então apenas um logotipo de copyright simples para terminar as coisas. Esta será uma boa chance de dar uma chance a isso sozinho, adicionando o upload de imagem e, em seguida, os componentes superiores. Basta lembrar, este também precisa de um método de retorno de chamada para limpar a imagem assim como usamos nos componentes frontais da placa. Vamos para os componentes do verso da placa. Selecione isso. Tudo o que temos no momento é o texto do verso do cartão. Vou remover todo o conteúdo e, em seguida, ir para a frente do cartão, selecionar tudo e copiar, e, em seguida, adicionar isso dentro do verso do cartão. Lembre-se, os estilos não têm mais escopo, então podemos removê-los, a menos que ainda se apliquem. Nós não temos nenhum texto na seção, então apenas o upload da imagem e a saída da imagem. Podemos remover os dois primeiros componentes. Nós vamos fazer uso deste método de imagem clara, para que possamos deixar isso dentro Em seguida, abra a seção de dados, só precisamos do nome da imagem porque não estamos trabalhando com nenhum dos valores de livros didáticos. Nós também podemos remover as importações para as entradas de texto, e também para a saída de texto, e, em seguida, começar a trabalhar em nossos modelos. Precisamos de um upload de imagem CC, que já temos, para que possamos remover as entradas de texto livre, então a de cima, e depois duas de baixo. O mesmo para as saídas, podemos mover as saídas de texto de cima e as duas saídas de baixo. Agora só temos o upload da imagem e, em seguida, as saídas da imagem no lado direito. Vamos usar as alturas dos contentores, e desta vez vou definir isto para 400. Ainda precisamos do suporte de imagem clara, porque vamos usar isso para remover a imagem e, em seguida, acionar o método para então definir a imagem padrão, que está aqui. Quando tudo isso acabar, vamos salvar e ver como está. Vá para a parte de trás do cartão, escolha um arquivo e defina a imagem. Bom, isso está funcionando. Nós também temos a capacidade de arrastar a imagem. Então vamos tentar remover uma imagem. Ótima. Essa é a nossa imagem padrão trabalhando com o verso do cartão. Agora isso está funcionando, esta é a última seção a ser concluída. Agora temos todas as seções do nosso cartão funcionando. Vejo você no próximo vídeo. Vamos dar uma olhada no aumento do evento. 82. Introdução ao barramento de eventos: Ao analisar os componentes nessas últimas seções, analisamos como os componentes pai-filho podem se comunicar. Sabemos que passamos dados da criança para os pais com eventos personalizados. Além disso, sabemos que passamos dados dos pais para a criança usando adereços. Isso funciona bem se os componentes que estão para se comunicar, são apenas um nível de distância como até agora em nosso aplicativo. Por exemplo, os componentes de entrada e saída de texto são filhos diretos da frente do cartão. Isso torna a comunicação fácil de alcançar. No entanto, muitas vezes há circunstâncias em que os componentes são aninhados dois ou mais níveis separados e precisam se comunicar. Isso é comum à medida que nosso aplicativo cresce. Se você considerar um aplicativo que tem uma estrutura como esta, os dois componentes na parte inferior não têm componentes pai diretos para passar dados entre eles. É possível continuar passando eventos até a cadeia, volta ao nível superior e passar adereços todo o caminho de volta para baixo para isso pode rapidamente ficar confuso e insustentável. Para facilitar esta comunicação, podemos usar o que é chamado de barramento de eventos. Um barramento de eventos não é nada mais do que uma instância vue vazia, que usamos como uma fonte de dados central. Nós importamos isso em qualquer arquivo componente onde queremos usá-lo. Isso será útil para o próximo recurso que adicionarmos ao nosso aplicativo. Dentro dos quatro vues de cartão, eu vou adicionar uma caixa de seleção para marcar esta seção como concluída, então isso irá passar dados para o cabeçalho para atualizar uma barra de progresso. Como vimos no último slide, esses dois componentes não compartilham componentes pai comuns para passar dados entre eles. A barra de progresso é filho para o cabeçalho, e a caixa de seleção é filho para as seções do cartão, portanto, o barramento de eventos é ideal para o seu serviço. Vou adicionar este barramento de eventos ou esta instância vue ao nosso arquivo main.js. Vá para o main.js, e precisamos ter certeza de que adicionamos isso antes da função de renderização. Logo abaixo das importações, vamos exportar uma constante chamada bus de eventos, e vamos definir isso para uma nova instância vue. Isto irá exportar uma constante chamada bus de evento, portanto, agora podemos importá-los para qualquer arquivo que queremos acessá-lo usando o nome do barramento de evento que já lhe demos. Esta caixa de seleção será um novo arquivo de componente para que possamos adicioná-lo às seções de previsão. Podemos ir em frente e criar isso da maneira usual. Então vá para os componentes e, em seguida, dentro do cartão, eu vou criar um novo arquivo chamado SectionCompleted.vue, então podemos adicionar a seção de modelo com a caixa de seleção e também o texto. Adicione nossos modelos no topo. Para começar, vou adicionar uma linha de loja de ônibus ao redor. Então, na seção de abertura, podemos adicionar a classe de linha e, em seguida, um segundo ninho div dentro e isso vai ser para o nosso grupo de formulário. Vamos adicionar algumas classes de loja favoráveis de verificação de formulário, e também formulário de verificação na linha. Estes são estilos que usamos anteriormente. Estas corresponderão ao resto da aplicação. Então mais uma div aqui dentro com a classe de etiqueta de verificação de formulário. Esta é a div circundante para as nossas entradas. As entradas terão um tipo de caixa de seleção, para que possamos selecionar uma vez que a seção atual tenha sido editada, e esteja completa. Finalmente, algumas classes de entrada de verificação de formulário. Depois aqui, podemos adicionar o nosso texto da seção marca como concluída. Para começar, vou colocar isso dentro da seção frontal do cartão. Podemos adicioná-lo ao resto em breve. Então vá para o Cardfront.vue, e então podemos ir para baixo para o script e podemos adicionar nossas importações ou seção concluída. Isso também está na mesma pasta de cartão, então nós vamos escolher. /sectioncompleted. Em seguida, podemos registrar isso como um componente dentro da instância e vamos chamar meu ccSectionCompleted, que é o nome da seção concluída que demos para a importação apenas aqui. O componente agora está pronto para adicionar aos modelos. Vou adicionar isso na parte inferior da seção de edição, então role de volta para os modelos, e a seção de edição é esta primeira div aqui. Logo abaixo do último cc-text-input, podemos adicionar nosso cc-section-completed, e a tag de fechamento. Dê isso seguro e agora devemos ser capazes de iniciar os servidores div e ver os componentes. O meu já está em execução, então eu vou para o navegador e, em seguida, role para baixo para baixo. Agora devemos ver que temos os componentes na tela. Teremos a caixa de seleção e o texto da seção Marcar como concluído. A caixa de seleção está aparecendo na lista de tela vamos dar uma olhada na seção Concluída. Cubra isso, então formulário etiqueta de verificação para mudar isso. Ótimo, então esse era o problema. Acabamos de ter um problema de estilo. Agora, temos esta configuração de componente. No próximo vídeo, usaremos isso para emitir dados para o barramento de eventos. 83. Enviando eventos ao barramento de eventos: Agora temos um componentes SectionComplete e a configuração EventBus. Neste vídeo, vamos importar o EventBus nos componentes SectionComplete de hoje e, em seguida, emitir eventos personalizados de volta para o EventBus. Vamos começar importando o arquivo EventBus. Então, basta explodir os modelos, eu vou adicionar as tags de script. Primeiro de tudo, vamos importar o EventBus. Então esta é a sintaxe ES6. Essas chaves codificadas importam um único membro de um módulo, que nomeamos o EventBus do arquivo main.JS. Então o caminho do arquivo é../.. /main.js. Então, em vez de importar o conteúdo completo do JS principal, que não é o que queremos. Nós só queremos importar este EventBus, que é esta exportação que fizemos aqui. Agora podemos criar uma propriedade chamada Checked. Então exploda o impulso. Podemos criar nossos padrões de exportação e, em seguida, adicionar nossos dados da maneira usual. Então vamos criar uma propriedade de dados chamada Checked, que é inicialmente uma string vazia. Isso será usado para conter um valor verdadeiro ou falso da caixa de seleção. Portanto, precisamos usar isso com V-model como atributos Checkbox. Então vamos adicionar modelo V para a caixa de seleção. Então, dentro da entrada, podemos adicionar V-model e definir este para ser o nosso valor de dados de verificado. Esta caixa de seleção também precisará de um manipulador de cliques. Então, vamos também adicionar isso. Então, em Clique e deseja configurar um manipulador de clique, que dispara um método chamado Seção concluída. Então, uma vez clicado, isso irá acionar um método chamado Seção concluída. Vou usar este método para me comunicar com o EventBus. Então, agora vamos configurar este método abaixo. Então, volte para a nossa instância de visão. Então, logo após os dados, você pode adicionar uma vírgula e, em seguida, configurar nossos métodos. Então vamos chamar esta Seção Completa. Então, anteriormente, nós emitimos eventos personalizados usando isso. $emit. Para fazer isso com o evento ambos usamos EventBus. $emit. Claro, se você nomear o EventBus de outra coisa, você precisará usar um nome que você criou. Então, o EventBus. $emit. Então, como antes, passamos o nome que queremos dar a este evento personalizado dentro das cotações. Então eu vou chamar este evento personalizado Mark As Concluído. Em seguida, separe-o por uma vírgula. Queremos enviar o valor dos cheques. Então adicione isso.verificado. Esses componentes também precisa ser colocado nas seções overcrowd para. Vamos em frente e fazer isso agora. Precisamos importar, registrar e também adicionar os componentes nos arquivos de modelo, assim como fizemos em CardFront.view. Então vamos apenas copiar esta declaração de importação de Seção Concluída. Podemos adicionar estes no cartão Inside Left. Então, neste como componentes separados por vírgula. Então cc Seção concluída, que é Seção concluída. Em seguida, podemos adicionar isso dentro dos templates, assim como fizemos com CardFronts. Então fizemos isso na parte inferior da área de edição. Então vamos fazer o mesmo por Inside Left. Então, apenas abaixo das entradas de texto, você pode adicionar a seção cc concluída. Mesmo para o Inside Right estimando a importação, registrar os componentes e em seguida, isso para o modelo novamente abaixo de todas as entradas de texto. Essas são as frentes Dentro Esquerda e Dentro Direita, que apenas deixa o cardback.Vue. Então, acelerando a importação e faremos exatamente o mesmo. Registre os componentes da seção cc concluída. Então, finalmente, adicionaremos isso na área do editor, junto com a tag de fechamento e, em seguida, pressione Salvar. Então vamos testar isso dentro do navegador. Então vamos começar com o cartão Front. Então temos o componente exibindo na tela. Dentro da esquerda, também podemos vê-lo. O Inside Right também parece bem. Então, finalmente, as costas. Portanto, este é um componente agora completo e enviando eventos personalizados para o EventBus. Vamos verificar se está funcionando no próximo vídeo onde criaremos nosso componente final para este projeto, que usaremos para receber o valor deste evento do EventBus. 84. Recebendo eventos do barramento de eventos: Agora enviamos dados para o barramento central de eventos usando um cifrão emite para enviar esses eventos personalizados. Agora, vamos começar criando os componentes finais deste projeto, que será a seção de progresso dentro do cabeçalho. Este componente também usará o barramento de eventos, mas desta vez ele escutará o evento e usará os dados passados para ele. Como sempre começamos criando o arquivo componente. Vou chamar este arquivo de CardProgress.Vue. Então, dentro da pasta do cartão eu vou adicionar um novo arquivo de CardProgress.vue. Então, dentro daqui, podemos criar nossos modelos habituais. Eu vou script tags, e então finalmente eu vou estilizar tags. Dentro do script vou criar um padrão de exportação vazio para todas as instâncias de visualização, que voltaremos para você em breve. Este componente será aninhado dentro do componente de cabeçalho. Então precisamos registrar isso dentro do arquivo header.vue. Então vamos passar por este arquivo e podemos começar importando este novo arquivo CardProgress. Então, no topo dos scripts eu vou adicionar nossa importação de CardProgress. Então, o caminho do arquivo é. /, isso também está dentro da pasta do cartão. Então CardProgress.vue, e, em seguida, dentro de nossa instância, podemos registrar nossos componentes. Então, logo abaixo do observador eu vou adicionar um, e então adicionar nossos componentes. Então o único componente que precisamos adicionar é este arquivo. Então vou ligar para o meu CCCardProgress. Então agora com todo o arquivo importado e registrado, podemos agora ir em frente e adicionar isso aos nossos modelos. Logo abaixo das listas não ordenadas para os links de navegação, vamos adicionar uma linha horizontal e, em seguida, abaixo disso, o CCCardProgress. Então, como sempre, isso precisa de uma abertura e a tag de fechamento. Por isso, agora é importado, registrado e um modelo. Agora podemos voltar para o arquivo cardprogress.vue, e começar a adicionar nossos templates. Vou começar com uma div circundante, que vai ser a div para a nossa fileira. Então, podemos adicionar classes bootstrap de linha dentro aqui. Em seguida, uma segunda div, e esta div vai conter a nossa classe de col-sm-12. Então, este é um componentes de largura total. Assim, o conteúdo deste modelo será bastante simples. Tudo o que vamos fazer é adicionar uma barra de progresso, e também completar o texto, que diz quantas seções foram marcadas, então, por exemplo, 104 e 204. Então, vamos adicionar este texto primeiro com as tags P. Dentro daqui vamos adicionar os textos de concluída. Então, por padrão, será zero ou quatro. O seriado será dinâmico. Isso precisa ser aumentado toda vez que o usuário clica na caixa de seleção. Então, para fazer isso dinâmico. Podemos adicionar essas tags span antes e depois do zero, e então podemos alterar o conteúdo entre essas tags, eu vou adicionar um ID do contador. Isto é apenas para que possamos acessá-lo com JavaScript mais tarde neste vídeo. Este componente acessará o barramento de eventos. Então precisamos importar isso dentro dos scripts. Então, no topo das tags de script, vamos importar o barramento de eventos. Vou fazer isso com a sintaxe ES6 que analisamos anteriormente. Então, isso importará o único membro do barramento de eventos do arquivo main.js. Então, para acessar este arquivo main.js, o caminho é../,../, o main.js. Então, se você se lembrar desde o início deste curso, nós olhamos para os ganchos do ciclo de vida da visão. Um desses ganchos foi o gancho criado, e podemos usar este gancho criado para executar uma função. Cada componente é criado. Dentro deste gancho, podemos ouvir um eventos personalizados na instância vista com o método de sinal de dólar. Então, vamos adicionar isso agora. Voltar para baixo para o padrão de exportação, podemos adicionar o gancho criado. Dentro deste gancho criado podemos acessar o barramento de eventos e, em seguida, usar um sinal de dólar em, método de instância para ouvir um eventos personalizados. O evento que queremos ouvir é marcar como concluído. Então esta marca como evento concluído é aquele que está sendo passado para o barramento de eventos de nosso arquivo de seção concluída. Então nós apenas aqui, então cada vez que o usuário clica na caixa de seleção, que é o valor booleano de true ou false, isso é então emitido para o barramento de eventos, e então teremos acesso a isso com o arquivo de progresso do cartão. Então, sempre que houver uma mudança para este evento, isso irá então acionar uma função. Esta função leva os dados do evento entre parênteses. Então eu vou chamar esses dados, e nós podemos então usar esses dados dentro de nosso corpo de função. Então, como mencionamos anteriormente, o valor que está sendo passado para o barramento de eventos é um valor de caixa de seleção verdadeiro ou falso. Isso significa que esses dados sendo postados para nós apenas aqui, serão verdadeiros ou falsos. Assim, pode adicionar uma instrução if para verificar se os dados são verdadeiros. Se for, queremos incrementar o contador em um a cada vez. Então, podemos acessar o contador com o Id do contador, que é a tag span cercado em zero. Então, podemos acessar isso com documents.getElementsByID. O Id, claro, é contra. Então agora nós selecionamos este contador. Queremos acessar o texto interno. Portanto, queremos aumentar zero em um a cada vez. Podemos facilmente fazer isso com ponto em um texto, plus. Então, se os dados dentro daqui forem verdadeiros, a contagem será aumentada em um a cada vez. Então vamos dar um salvamento e verificar isso no navegador. Então vá para o navegador, e, em seguida, se selecionarmos marcar seção como concluída, vemos agora que temos o valor de um ou quatro. Para ir para uma segunda seção e tomar um agora dizer dois ou quatro, e depois livre, e, finalmente, quatro para quatro. Então, podemos ver se você continuar clicando na caixa de seleção, o valor continua subindo e subindo. Em seguida, precisamos ter certeza se o usuário desmarcar a caixa, que o valor é reduzido em um também. Então, podemos facilmente fazer isso dentro de uma outra declaração. Então, logo após a instrução if, nós também podemos adicionar outro, e então eu vou apenas copiar this.getElementByID baseado em onde também estamos indo para selecionar o contador. Mas desta vez, vamos diminuir por um em cada clique, então salve isso, e agora se formos para atualizar, vamos começar com a frente. Então agora vemos um, o insight à esquerda, agora vemos dois, e depois clicamos novamente, e agora reduzimos de volta a um. Vamos tentar isso com mais um componente, então dois, e depois de volta para um. Então tudo parece funcionar bem. Então, a última coisa a fazer é agora aumentar e diminuir a barra de progresso para dar ao usuário uma indicação visual. Então, já tem principalmente configuração com as declarações if-else. Então, dentro das declarações if-, eu vou novamente colar neste documents.getElementByID. Mas desta vez queremos selecionar a barra de progresso. Então vamos adicionar a barra de progresso logo abaixo desta seção concluída. Então vamos começar com 0 por cento. Assim, o valor é inicialmente definido como zero e, em seguida, queremos que o valor máximo seja igual a 100. Então, para que possamos aumentar esse valor cada vez que vamos adicionar um ID de CardProgress, então salve isso. Agora podemos usar este CardProgress Id dentro do document.getElementById. Então, em vez de selecionar o contador, vamos colar no CardProgress. Mas desta vez queremos aumentar o valor. Então esse valor a ser aumentado em 25 cada vez. Isso é porque é uma porcentagem, temos quatro seções. Então, cada vez que é clicado, ele vai subir em 25 por cento, então mais é igual a 25. Então eu vou copiar isso, e colar isso dentro das declarações anteriores. Mas desta vez, mude a vantagem para um negativo e guarde isso. Então vamos para o navegador e nos dar uma chance. Então, vamos tentar clicar em uma das seções. Então a marca está concluída, e agora vemos a barra de progresso está aumentando. Isso é tentar mover isso, e também vai para baixo. Vamos tentar mais uma seção bem bom. Para que tudo pareça no lugar, assim como o texto completo aumentando e descendo, também vemos o valor da barra de progresso mudar. Uma última coisa a fazer para terminar esses componentes é fazer com que a barra de progresso seja a largura total da página. Isso pode ser feito com algum CSS simples sobre o arquivo CardProgress.vue. Então vamos até as tags de estilo e fazer isso com escopo. Assim, os estilos só se aplicariam a esta seção. Queremos direcionar a barra de progresso e, em seguida, definir a largura para ser igual a 100 por cento. Então vamos ver como isso parece agora se atualizarmos o navegador, ok bom. Vemos que a barra de progresso abrange toda a largura do contêiner. Então vamos testar isso, então vamos clicar na caixa de seleção. Vamos tentar um segundo, tudo parece bom, e um terceiro, tudo bem. Tudo isso está funcionando agora, então parabéns. Agora você usou com sucesso o barramento de eventos para comunicação não pai-filho. 85. Adicionando mesclagens: medida que nosso aplicativo cresce, às vezes pode haver situações em que os componentes precisarão reutilizar o mesmo código. Normalmente, não é uma boa prática repetir o mesmo código mais de uma vez. Dentro do nosso aplicativo, se olharmos para o CardFront, então vá para o CardFront.vue e, em seguida, até o script. Aqui temos um novo método chamado cleariMAGE. Além disso, se formos para os componentes CardBack, também temos o mesmo método repetido apenas aqui. Então repita o mesmo método cleariMAGE mais de uma vez. Para ajudar com este vue.js dispositivos com mixins. Mixins são uma maneira mais fácil de tirar qualquer funcionalidade de nossos componentes. Isso inclui qualquer coisa, como nossos dados, métodos e propriedades computadas e colocadas em seu próprio arquivo separado. Este arquivo pode então ser importado para cada componente que precisa de acesso a ele. Vamos criar este arquivo na pasta de origem. Vou chamar esse arquivo de ClearimaGemixin, e ele vem após a extensão the.js. Então podemos exportá-lo como uma constante chamada ClearimaGemixin. Então exporte as constantes de ClearimaGemixin, e você pode chamar isso do que quiser, mas eu vou chamar isso de ClearimaGemixin como é descritivo válido. Agora nosso método CleariMAGE pode ser chamado de dentro do arquivo Cardback.vue. Então vá para o cardback.vue e então eu vou chamar isso de métodos completos, não apenas a seção CleariMAGE. Então corte o método completo até lá. Certifique-se também de remover a vírgula de fechamento. Então este método agora pode ser colado em nosso arquivo mixin. Então vá para trás para esses objetos e cole isso dentro. Nus à mente, também podemos adicionar qualquer outra coisa da nossa instância do Vue aqui, como quaisquer dados e propriedades computadas que podem estar relacionadas. Esta constante foi exportada agora. Então, agora podemos voltar para o cartão, componentes traseiros, e importante o novo mixin. Então, de volta ao topo do script, podemos adicionar instruções de importação para os três primeiros. Novamente, assim como o Eventbus, usamos as chaves para indicar que queremos impor um único membro deste módulo. No nosso caso, o nome é ClearimaGemixin e, em seguida, queremos importar isso a partir do caminho do arquivo de../.. /ClearimaGemixin. Agora isso é importado. Agora podemos misturar isso com o resto do nosso código dentro da instância do Vue. Assim, dentro dos padrões de exportação, nós também podemos adicionar a propriedade do mixin, e este é um array. Tenho certeza que saiu a vírgula logo depois para separar isso dos dados. Então aqui dentro podemos adicionar o nome do nosso mixin que foi ClearimaGemixin. Então este é o método cleariMAGE adicionado agora de volta aos nossos componentes. Poucos apenas que mistura o conteúdo em nossos dados existentes. Se houver alguma chave conflitante dentro do objeto a ser mesclada, as opções de componentes terão prioridade. Podemos dividir nosso código em mais mixins também. Não estamos restritos a usar apenas uma manhã. O processo é o mesmo que acabamos de fazer. Nós movemos o código para o seu próprio arquivo, módulo de importação, e, em seguida, também podemos adicionar o nome do mixin à matriz destes mixin separada por uma vírgula. Agora só precisamos fazer o mesmo dentro do nosso código do arquivo. Nós também adicionaremos o método cleariMAGE. Salve este arquivo e vá para o Cardfront.vue. Então faremos exatamente o mesmo. Precisamos remover o método completo da instância do Vue. Em seguida, precisamos importar o ClearimaGemixin. Então, adicione estes na parte inferior das importações, assim como fizemos antes. Então, Clearimagemixin. O caminho do arquivo é o mesmo, é../.. /ClearimaGemixin. Em seguida, descemos para os nossos padrões de exportação e adiciona a matriz do nosso mixin. Nós só temos um, então ClearimaGemixin é o único valor dentro da matriz. Agora podemos ir para o nosso aplicativo e testar o método cleariMAGE está funcionando dentro dos componentes CardFront e CardBack. Então salve este arquivo e vá para o navegador. Podemos começar dentro da seção CardFront. Vamos escolher um arquivo, em seguida, inserir imagem, e uma vez que ele baixar, vá para a imagem e clique na remoção. Bom. Então esse ainda está funcionando. Nós também vamos testar isso dentro do CardBack a partir de pressões vai encontrar para. Então escolha uma imagem, abra-a, defina a imagem, passe o mouse sobre e remova a imagem. Ótimo. Então isso ainda está funcionando. Então lembre-se que podemos usar quantos mixins você quiser dentro do nosso aplicativo. A palavra ter em mente se precisamos usar código em mais de um lugar. Assim, mixins são uma boa maneira de organizar nossos projetos e também evitar qualquer repetição de código. 86. Desfecho da seção: continuação de componentes e armazenamento do Firebase: Parabéns por chegar ao final desta seção. Nós abordamos tanto nesta seção, incluindo trabalhar com o Firebase, adicionar o menu de opções de texto, trabalhar com componentes e também formas alternativas de passar dados entre eles. Até agora, nós também deve ter um aplicativo de cartão totalmente funcional repleto de recursos, e espero que você tenha aprendido muito com ele, também. Agora você aprendeu muito sobre a criação de aplicativos com Vue.js. Agora, vamos continuar aprendendo na próxima seção. 87. Introdução da seção: transições e animações: Bem-vindo a esta nova seção. Vamos fazer uma pausa da adição de novos recursos ao nosso aplicativo e também componentes para analisar algumas maneiras de realmente tornar nosso aplicativo muito mais agradável de usar. Esta seção é sobre a adição de transições e animações. Esta é uma ótima maneira de fazer seus aplicativos parecerem muito mais polidos e realmente melhorar a experiência do usuário. Esperamos que você esteja ansioso por esta nova seção e te vejo lá. 88. Classes de transição: Ao trabalhar com transições enter leave, existem seis classes que são aplicadas durante vários estágios da transição. Temos livre para a interface que lida com o início, fim e também a fase ativa. O mesmo se aplica para a fase de saída, onde também temos acesso à partida, saída, uma classe ativa. Para entender o que cada um deles faz, eu configurei uma transição simples desenhada, que define a opacidade de um elemento ou componentes. Aqui temos a interface e a transição começa na classe v-enter. Dentro desta classe, podemos, por exemplo, adicionar classes CSS para declarar como os elementos ou componentes começarão a transição. Neste exemplo, nossos elementos começarão como transparentes. Assim poderíamos definir a opacidade para zero aqui. Isso só entra em vigor para o primeiro quadro da transição. Portanto, use-o apenas para a fase inicial de inicialização. Após esta primeira fase, v-enter, em seguida, removido e, em seguida, v-enter-to assume o controle. v-enter-to define o estado final para a fase enter. Por exemplo, aqui podemos definir a opacidade para ser um, já que o elemento está agora inserido. Durante a interface completa, também temos acesso a outra classe chamada v-enter-active. Porque esta interfase completa aconchegante, este é um lugar ideal para adicionar CSS para definir a duração do tempo ou atraso da transição. Então passamos para a transição de licença. Aqui, temos basicamente o mesmo que as três primeiras classes, revisadas. Para o primeiro quadro da transição de saída é acionado, definimos o estado inicial com v-leave. Assim como a interface é dura para um quadro, em seguida, v-leave-to, é responsável pelo estado final. Indeciso quando v-leave é removido após o primeiro quadro. V-leave-to é onde adicionamos o estado final para a transição. Assim como antes, a transição de saída também tem uma classe que cobre a licença completa em fase chamada v-leave-active. Também, isso é ideal para certas coisas, como a duração da transição. Estas são as seis classes a que temos acesso durante a transição. Os nomes das classes começam com o prefixo v por padrão, quando usado com os elementos de transição. Também podemos adicionar um nome a esta transição, e este nome substituiria o prefixo v. Por exemplo, se a nossa transição tivesse o nome de fade, as classes serão chamadas de fade-enter, fade-enter-active e assim por diante. Mas estas são algumas coisas que vamos dar uma olhada com mais detalhes no próximo vídeo. Começaremos a pôr isso em prática. 89. Adicionando transições de CSS: De volta aos projetos de carros criativos para começar a colocar algumas transições em prática. Agora vimos as classes de transição que podemos usar. A primeira técnica que eu quero mostrar é aplicar uma transição referem-se a elementos ou componentes. Vou para o arquivo TextOutput.vue. Então é como o TextOutput.vue. Vou adicionar este wrapper de transição em torno dos elementos de formulário. Este é o menu de opções que aparece quando você sobre o texto. Isso é ideal para adicionar uma transição porque atualmente ele só mostra e se esconde sem nenhum tipo de efeitos, como desvanecimento e desvanecimento. Então, o que precisamos fazer acima da forma do invólucro de transição. Então a abertura é assim e, em seguida, para baixo na forma de fechamento, indo para fechar esta transição e dar um salvamento. Cuidado, porém, que os elementos de transição só podem ser usados em certos casos. Podemos usá-lo com V, se de V mostrar também nós componentes, que vamos olhar em breve. Esta seção de formulário funciona com V show. Então encontramos no último vídeo que mencionamos nomear a transição. Para fornecer um nome, adicionamos esse nome dentro da tag de abertura de transição. Então volte para a transição. Abra a etiqueta. A transição será usada para desvanecer o menu dentro e para fora. Vamos chamar isso de desvanecimento. Então nome igual a desaparecer. Esse nome de transição substitui o prefixo V em CSS. Então vamos configurar isso na seção de estilo. Então, role para baixo até as tags de estilo na parte inferior. Não estamos assim logo após a seleção. Aqui podemos adicionar todas as nossas classes de transição. Vamos começar com fade-enter, fade-enter-active, fade-enter-to, fade-leave. Os dois últimos são “fade-leave-active”. Finalmente, fade-leave-to. Este desvanecimento é o nome da transição que demos. Este é o substituto para o prefixo V que mencionamos antes. Isso pode parecer um monte de coisas acontecendo aqui, mas não podemos simplificar as coisas para este exemplo. Então, se olharmos para este exemplo de antes, resposta V tem a capacidade de zero. Também na transição de saída, v-leave-to também tem a capacidade de zero. Então podemos combinar estes Inside the CSS para tornar as coisas um pouco mais simples. Então, por cima, temos fade-enter. Eu também vou adicionar fade-leave-para colocar esta seção e entrar as chaves e tê-los combinar isso com resposta fade. Vamos definir a opacidade como vimos no exemplo antes. Isto vai ser zero. Também v-enter-to e v-leave tem a mesma opacidade CSS de um. Então nós também poderíamos combinar estes. No entanto, não precisamos fazer isso. A razão é porque a opacidade CSS é definida como um por padrão. Não há necessidade de declará-lo a menos que seja algo diferente do padrão. A opacidade que definimos em zero será removida após o primeiro quadro, que restaurará os padrões. Isso significa que podemos remover v-enter-to. Também v-leave para este exemplo. Vamos remover esses dois. Então isso nos deixa com as classes ativas para as fases de entrar e sair. Podemos usar um certo período de tempo que a transição leva para aparecer e também para remover. Estas duas classes também podem ser combinadas. Defina o mesmo tempo de transição, mantenha-o equilibrado. Então vamos cortar este. Então vamos adicionar isso aqui. Então vamos adicionar transição para ambas as classes. Então vamos usar a propriedade de transição CSS. Então queremos definir a opacidade de 0,5 segundos. Então, dê um salvamento. Agora, se formos para o navegador, e então se passarmos o mouse sobre um dos elementos, podemos ver que o menu desaparece bem dentro e fora de um segundo e meio. Isto parece um pouco mais agradável do que antes. Outra coisa que podemos fazer é também mover o CSS para esta transição de desvanecimento fase e adicioná-lo ao arquivo up-to view como um estilo global. Eles serão úteis se quisermos adicionar o estilo de fade em todos os elementos. Vamos ao CSS. Se cortarmos os estilos, salve o arquivo. Então, se formos para o app.vue, pode colar estes em como estilos globais. Então, apenas na parte inferior, cole estes dentro. Agora, se eu passar o mouse sobre o menu, podemos ver que o phade ainda se aplica. Enquanto estamos nisso, também podemos fazer o mesmo para o botão remover imagem para torná-lo muito bem desaparecer dentro e fora. Então eu tenho o arquivo de saída de imagem e, em seguida, para arredondar este botão podemos fazer exatamente o mesmo. Podemos adicionar o wrapper de transição e, em seguida, dar a este um nome de fade. Então feche este invólucro. Simplesmente assim e dê um salvamento. Agora, se formos para o aplicativo, agora podemos ver que o botão, bem como o menu, desaparece bem dentro e fora. Então este é um exemplo simples de uma transição, mas realmente faz a diferença para a aparência do nosso aplicativo. Em seguida, vamos olhar para adicionar animações INCSs. 90. Adicionando animações de CSS: Junto com transições, também temos as opções para adicionar animações. As animações nos permitem mudar gradualmente de um estilo para outro. Poderíamos mudar gradualmente um elemento de uma cor para outra. Para este exemplo, vou adicionar um efeito de escala ao botão remover imagem. Isso significa que um botão começará pequeno e, em seguida, aumentará para o tamanho normal quando o mouse passar sobre ele. Em seguida, quando o mouse sair, o botão irá então encolher a vista externa. Podemos começar da mesma maneira usando o mapeador de transição. Vá até o arquivo ImageOutput.vue. Então, se procurarmos o botão para remover a imagem, que é apenas aqui, eu vou mudar o nome da transição para ser escala. Para a animação, precisamos configurar a regra de quadros-chave em. Precisamos configurar quadros-chave para controlar as etapas da animação CSS. Para começar, vamos configurar os quadros-chave para aumentar a escala e, em seguida, reduzir a escala. Para baixo no CSS, bem na parte inferior da página, basta soprar este seletor de imagem, em seguida, os quadros-chave at. Vou criar um para aumentar a escala e, em seguida, um segundo para a escala horizontal, assim. Este é CSS padrão, não é específico do Vue. Então precisamos parar os passos da animação. Para manter as coisas simples, vou adicionar um começo e um estágio final. Se quiséssemos, poderíamos até adicionar mais estágios em diferentes percentagens durante a animação. Vamos começar com zero por cento, que é o começo. Em zero por cento, vou definir uma transformação. Eu vou transformar a escala para começar inicialmente em zero, e então abaixo aqui vamos definir a regra de 100 por cento. Isto vai ser novamente uma transformação de escala, mas desta vez vai ser uma. Isso configura os quadros quando a animação está sendo dimensionada. Em zero por cento escala é zero, então ele vem aqui. Então, no final da transformação, a escala é então levada até um, o que a tornará em tamanho real. Eu também vou fazer o mesmo para escala horizontal copiando essas duas linhas de código e colando-as. Mas porque estamos diminuindo, queremos fazer o contrário. Com zero por cento, desta vez queremos que a escala seja uma para que fique totalmente visível na tela em tamanho real. Então, no final, a 100 por cento que queremos é ser encolhidos de volta para baixo para que possamos vê-lo. Vamos definir a escala para ser zero quando estamos apenas adicionando o zero em estágios 100%. Nós também podemos mudar isso para ser chamado para e de vez de zero em 100 por cento. Se um funciona bem, agora temos o controle de configurações de quadros-chave de como queremos que a animação funcione. Podemos adicioná-las às regras CSS como já fizemos antes. Acima dos quadros-chave vou adicionar as regras CSS. Lembre-se, porque chamamos essa escala de animação, vou adicionar a classe de escala de enter ativo. Aqui vamos definir a animação que queremos usar. A animação é escala na seção quadro-chave e, em seguida, definimos a duração. Quero que isto aconteça durante 0,5 segundos. Então, abaixo, podemos fazer a fase ativa de licença. Então a escala deixa ativa. Isso novamente leva em uma animação. Desta vez, porque estamos deixando a animação, queremos usar a seção de escala horizontal. A animação é reduzida. Vou manter isto mais de 0,5 segundos durante a duração. Lembre-se de entrar ativo e sair de classes ativas, cobrir a fase de entrada e saída completa. Aqui está um lugar ideal para adicionar nossa animação, juntamente com a escala de tempo para sua tomada. Vamos salvar isso e depois passar para o navegador. Se formos para a saída da imagem, podemos ver quando passamos o mouse sobre a seção que o botão que foi arredondado com a transição, agora escala de zero até um 100% do tamanho, mais de meio segundo. Uma vez que temos esses quadros-chave configurados, adicionar uma animação é muito parecido com as transições que vimos no último vídeo. Ainda temos acesso às classes CSS, como v deixar e v entrar a. Mas através do lembrete, se estiver usando v enter, isso não é imediatamente removido após o elemento ser inserido. Em vez disso, isso acontece com os eventos finais da animação. Os elementos de transição raiz têm uma extremidade de transição e também um ouvinte de evento final de animação anexado, modo que o Vue JS sabe quando a transição terminou. Esta é uma pequena diferença a ser ciente ao usar animações. Em seguida, passaremos à adição de transições aos componentes. 91. Transições de componentes e modos de transição: Não estamos limitados a adicionar transições em animações a apenas elementos. Podemos até mesmo fazer a transição entre os componentes quando clicamos nos links do menu. Começa com o familiar wrapper de transição, que ainda podemos usar com as tags keep-alive. Vamos começar de novo no app.vue. Se localizarmos esta seção “keep-alive” com os componentes, vou criar algum espaço acima e também abaixo. Então vamos criar o invólucro de transição familiar. Adicione isso no início. Em seguida, na etiqueta de encerramento, logo após a última tag “keep-alive “, apenas assim. Então eu vou reutilizar o nome do fade, tirar proveito dos estilos que já estabelecemos na parte inferior. Apenas aqui. Vamos fazer isso adicionando o nome da transição dentro da tag de abertura. O nome igual ao fade e, em seguida, dar-lhes um mesmo. Agora, se formos para o navegador, podemos dar uma olhada nos efeitos. Agora, se clicarmos nas páginas diferentes, podemos ver que há uma transição acontecendo. Mas se olharmos mais de perto, podemos ver um problema. Para mostrar isso com mais detalhes, vou diminuir o zoom. Então agora, se clicarmos nas diferentes páginas da web, podemos ver que a página da web começa na parte inferior e, em seguida, salta. Agora está de volta ao tamanho normal. Este não é o comportamento que estamos esperando. A razão é que aconteceu é porque, por padrão, os elementos de transição que entram e saem fase acontecem ao mesmo tempo. À medida que um novo componente entra, o espaço ainda é ocupado por todos os componentes. Em seguida, uma vez que o componente antigo sai, o espaço é então criado para os novos componentes, fazendo com que e terminem para saltar no lugar. Felizmente, Vue acabou de escrever isso com um modo de transição para ajudar a lidar com isso. Podemos adicionar o modo como um atributo para a tag de abertura de transição. Logo após o nome, vou adicionar o modo. Aqui, podemos entrar ou sair. Vamos começar com a entrada e dar uma olhada, e dar essa atualização. Agora, podemos ver que há um pequeno atraso, mas a página está sendo alterada. In-out não será útil para aqueles porque ele traz o novo componente primeiro e, em seguida, remove os componentes existentes. Vamos tentar entrar, e ver como isso está parecendo. Se voltarmos para o navegador e reduzimos o zoom novamente só para ter certeza. Ótima. Agora, quando selecionamos as diferentes páginas, podemos ver que o componente é comutado na mesma posição, em vez de começar na parte inferior e, em seguida, saltar de volta ao lugar. Isso é exatamente o que queremos. O componente antigo é removido primeiro e, em seguida, o novo componente começa a desaparecer. 92. Introdução aos ganchos de Javascript: Durante esta seção, usamos CSS para criar animações e transições em nosso aplicativo. Vgs também nos fornece ganchos JavaScript, que podemos usar durante certas fases da transição. Se você se lembra do início do curso, analisamos como poderíamos usar o Gancho durante vários estágios do ciclo de vida. Bem, o trabalho de transição do Gancho também é assim. Ao usar esses ganchos, temos acesso a todos os recursos que oficiais JavaScript não se limitam a apenas aplicar em CSS. Ele pode ver os vários ganchos que podemos usar. Assim como as aulas de transição. Temos um entrar e sair em fase, ambos com quatro ganchos cada. Abaixo destes auto-explicativos. Mas começará com antes de entrar. Como parece, este gancho é chamado no início antes da fase de entrada começar. Em seguida, temos enter que corre quer transição começou a interface. O gancho final da interfase é depois de entrar, e isso é chamado de elementos ou componentes 1C, terminou a transição em. O gancho de entrada final é chamado Enter cancelado. Isso é útil se a transmissão for cancelada enquanto estiver em andamento. Por exemplo, se o VCO se tornar falso, antes que a transição tenha tido a chance de concluir, aqui podemos fazer algum trabalho de limpeza ou restaurar a transição de volta ao seu estado original. Nós também temos o mesmo na fase folha, mas antes de sair, sair, depois de sair, e então também sair cancelado. Aplicar este é um mais fácil é relativamente fácil de fazer. Tudo o que precisamos fazer é adicionar os ganchos que você deseja usar como um atributo para os elementos de transição. Por exemplo, aqui temos os ganchos enter e leave como nossos atributos. Então estes são os ganchos que temos disponíveis para usar. Agora vamos voltar ao projeto e vê-los em ação. 93. Ganchos de Javascript em ação: Agora sabemos quais ganchos temos disponíveis para nós durante a transição. Agora podemos adicioná-los à nossa aplicação. Vou usá-los para adicionar algumas instruções ao nosso aplicativo. Essas instruções simplesmente dirão ao usuário para editar a seção à esquerda, e as alterações aparecerão no cartão do lado direito. Para fazer isso, eu vou passar para o app.vue e, em seguida, no final para ligar para a transição de componentes. Na tag de abertura, eu vou adicioná-los em sua própria linha, apenas para que seja mais legível, e então na parte inferior, vamos usar @ Enter igual a Enter. Aqui eu estou usando o símbolo @ como uma mão curta para v em para chamar o gancho Enter, em seguida, adicione o nome do método Enter. Podemos criar este método em breve. Mas primeiro vamos adicionar nossas instruções, queremos exibir. Eu vou fazer isso apenas sobre a transição, mas abaixo do cabeçalho de navegação. Vou criar uma div para começar, e esta será a seção circundante para nossas instruções. Vamos criar uma div, e também a tag de fechamento. Aqui eu vou lhe dar uma identificação de instruções, e então algumas aulas para fazer parecer um pouco mais agradável. Centro de texto e também itálico. Dentro desta div, eu vou criar uma nova div bootstrap com a classe de linha, assim como isso. Então aqui dentro eu vou criar duas novas seções. Isso vai dividir a página em, então vai ser duas, seis seções de coluna. O lado esquerdo terá alguns textos, para dizer fazer algumas alterações na área do editor abaixo. O lado direito dirá ao usuário que as alterações aparecerão abaixo, no lado direito. Vamos adicionar outra div. Na verdade, deixe-o agrupar isso. Classe ou bootstraps col-sm-6, então é metade da largura da página. Em seguida, vamos adicionar algumas tags p para adicionar algum texto, e, em seguida, aninhado dentro aqui eu vou adicionar as tags m para adicionar alguma ênfase no texto. Vou começar com entidade HTML. O e comercial, larr, então ponto e vírgula, e isso é para a seta para a esquerda. Nós guardamos isso. Podemos ver que a seta para a esquerda está aparecendo no lado. Em seguida, eu vou em frente e adicionar o texto de fazer alterações na Área Editar Código abaixo. Guarde isso e vamos ver como isso está parecendo. Ótimo, isso é exatamente o que queríamos do texto acima da área de edição. Agora vamos copiar esta div e fazer o mesmo para a área de saída. Copie esta seção de seis colunas e cole logo abaixo. Estabelecido necessidade de mudar o texto, e desta vez ele vai ser sob vai mostrar no cartão, assim como isso. Então precisamos da entidade HTML desta vez da seta para a direita. O ponto e vírgula e vírgula comercial. Ótimo, então era exatamente o que queríamos. Agora temos algumas instruções para o usuário. Agora podemos ir em frente e configurar o método Enter. Adicionamos o nome do método Enter logo acima, desculpe, logo abaixo na transição de Enter. Agora vamos descer para a instância de exibição e criar um novo método. Vamos apenas fazer isso logo abaixo dos dados. Vamos adicionar nossos métodos aqui, então o número um é chamado Enter. Se você criá-lo da maneira usual, e como em todos os eventos que vimos anteriormente, nós temos alguns dados passam para este método, que você passa para as instalações da função. Vou chamar isso de L, já que os dados passados para ele são o elemento que estamos fazendo a transição, então isso faz sentido. Podemos ver isso com um registro de console. Vamos adicionar rapidamente um console de login aqui e, em seguida, saída o valor de L, esqueci de inspecionar. Em seguida, vá para o console. Veremos isso em ação se alternarmos entre os componentes. Lá vamos nós. Agora vemos os elementos que estão sendo passados para ele. Isso pode ser usado em qualquer JavaScript que gostamos. Eu vou usá-lo para definir o tipo de exibição das instruções para ser nenhum. Isso significa que as instruções serão mostradas inicialmente quando o aplicativo é carregado, mas então elas serão removidas usando JavaScript quando alternarmos entre componentes. Vamos remover este log do console e substituí-lo por JavaScript. Ponto do documento obter elemento por ID. O ID que queremos pegar é esta seção de instruções, que damos um ID de instruções apenas aqui. Agora podemos pegá-lo e colocá-lo dentro dos suportes lá. Em seguida, para removê-lo, podemos definir o estilo, embora display para ser igual a non. Claro, também podemos usar qualquer um dos ganchos que olhamos no último vídeo dois se precisarmos. Vamos guardar isso. Agora, se formos para a saída, podemos ver as instruções ainda lá. Mas se mudarmos para componentes diferentes, vemos que agora ele foi removido. As instruções só estão lá quando o usuário visita o site pela primeira vez. Claro, também podemos usar outros ganchos que olhamos também no último vídeo. entanto, há uma coisa importante a lembrar, ao usar os ganchos Enter e Leave. Ao usar apenas JavaScript, em vez de misturar ganchos JavaScript junto com transições CSS, temos que adicionar um segundo argumento. O segundo argumento é o retorno de chamada feito. Passamos isso para os parênteses do nosso método ao lado de L. Separados por vírgula, vamos adicionar feito como um segundo argumento. Em seguida, chamamos isso como uma função no final do nosso código JavaScript. Apenas no final deste método, podemos adicionar feito para chamar a função. Isto irá então chamá-lo como uma função, no final do nosso código. As transições CSS têm coisas como durações de tempo, o fim do sinal de uma transição ou animação. Ao usar JavaScript, precisamos adicionar feito ao final do código para dizer Vue.js quando a transição realmente terminou. Quando usamos isso em combinação com CSS, o retorno de chamada feito é opcional ao usar ganchos sobre que Enter e Leave, apenas L é necessário. Finalmente, é considerado uma boa prática dizer ao Vue.js se estamos usando apenas JavaScript em uma transição, vez de usar JavaScript e CSS, ambos juntos. É assim que Vue.js pode ignorar o estágio de detecção CSS. Podemos fazer isso adicionando outros atributos para a transição. Vamos voltar para a tag de abertura de transição, e logo após o @ Enter e deseja fazer um v-bind. CSS é igual a falso. Isto, claro, não é para a nossa usecase porque também misturamos o gancho JavaScript com o CSS fade, que possamos ir em frente e remover esta linha. Mas é útil estar ciente, e você pode precisar dele no futuro. É assim que podemos usar ganchos JavaScript. No próximo vídeo, veremos como podemos misturar transições e animações. 94. Combinando animações e transições: Nós analisamos o uso de transições e animações de forma independente até agora. Ambos também podem ser misturados para trabalhar juntos também. Para fazer isso, precisamos remover a marca de não chamar do arquivo app.vue. Vamos fazer isso agora dentro do app.vue e para baixo dentro do método, podemos remover o feito, segundo argumentos, e, em seguida, também a chamada para ele no final do nosso método. Dê-nos salvos. Removemos isso porque ele impede que o VGS detecte as transições CSS, que usaremos. Então vamos começar por passar para o arquivo imageoutputs.vue. Primeiro vou cortar os estilos daqui e depois movê-los para o arquivo app.js principal dentro das tags de estilo. Então vamos começar cortando a balança. Dimensionar enter-active até os quadros-chave. Então corte aqueles fora da saída da imagem, salve isso e, em seguida, vá para o app.vue. Para baixo em grande estilo, podemos adicionar estes abaixo das aulas falsas. Então, cole isso aí. Com esses estilos agora disponíveis globalmente, podemos usá-los em todo o aplicativo. Como exemplo, podemos misturar animação em escala com o fade existente. Então o que eu vou fazer primeiro é dividir o fade-enter-active, e também o fade-leave-active em suas próprias linhas. É assim que podemos usá-los de forma independente. Então eu vou cortar e colar isso em ação com o fade enter e o segundo e também remover o fade-leave do primeiro. Agora podemos misturar as animações de escala e escala horizontal, mas alterar as durações para serem mais longas. Digamos dois segundos. Então, dentro do fade-enter-active, indo para manter a transição da opacidade para este tempo, vamos misturá-lo com animação. Vamos adicionar a animação de dimensionamento. Desta vez, durante uma duração de dois segundos. Animação de escalabilidade rápida, definimos com os quadros-chave abaixo. Comece este aqui. Quando desvanecer agora também, também podemos usar escala horizontal. Vamos fazer isso dentro do fade-leave-active. Podemos uma animação, usar os quadros-chave de escala ao longo de uma duração de dois segundos. Agora vamos salvar isso e ir para o navegador e ver como isso está parecendo. Então, faça um pouco menor para que possamos vê-lo entrando e saindo. Ótima. Então não parece bonito, mas você pode ver como uma demonstração, como a animação e a transição, ambas funcionam juntas. Agora tem uma animação e transição, mas ambos fluindo para diferentes durações, as coisas podem ser um pouco confusas. Precisamos dizer ao VGS se quisermos a animação, toda a transição será uma prioridade para o tempo. Fazemos isso dentro dos elementos de transição, definindo o tipo de transição. Então vamos voltar para o editor e encontrar o wrapper de transição que você está usando. Apenas aqui. Logo após o gancho JavaScript, podemos adicionar um tipo. Vamos definir a prioridade para a animação e ver como vamos olhar. Portanto, a animação é uma prioridade. Vamos mudar isso para transição e depois salvar e agora podemos ver que parece um pouco diferente. Não funciona muito para a nossa aplicação, mas mostra como podemos definir o tipo ou a prioridade para a transição. Vou remover este tipo, pois não precisamos dele. Isso é porque eu também vou remover a animação do CSS. Vamos remover o tipo e, em seguida, para baixo para os estilos, vamos remover as animações que acabamos de adicionar porque você não precisa delas para nosso uso. Então nos salve e espero que volte ao normal. Ótima. Isto é como podemos definir se queremos uma transição ou uma animação para ter prioridade ao misturar ambos os tipos 95. Classes de transição personalizadas: Até agora, ao usar transições, usamos as classes fornecidas a nós por vuejs, como v-enter e v-leave, que você pode ver aqui. Isso é ideal para casos mais baixos, mas talvez às vezes queremos usar nossas próprias classes CSS personalizadas. Essas situações podem surgir, particularmente ao usar uma biblioteca de terceiros para animações. Bibliotecas de animação, como animate.css, funcionam incluindo a biblioteca como um arquivo CSS ou usando um link CDN para a biblioteca. Em seguida, para acessar as animações, usamos os nomes de classe personalizados para cada animação, como classe é igual a limites, f ou exemplo. Contamos esse nome de classe personalizado usando os ganchos fornecidos ferramentas. No entanto, em vez disso, vuejs nos fornece algumas classes personalizadas para substituir cada classe de transição. Por exemplo, podemos adicionar o atributo anti-classe, com nossa própria classe CSS personalizada. Isso irá então substituir a classe v-enter. Podemos ver isso em ação se você acessar nosso aplicativo. Vamos começar no arquivo de saída da imagem. Demos a esta transição um nome de escala, para o botão remover imagem, também sobre o app.vue, para baixo na seção de estilo, para baixo na parte inferior. Em seguida, criamos os nomes das classes. Nós usando de escala entrar ativo e escala deixar ativo. Em vez de usar esses nomes predefinidos, podemos perguntar as classes personalizadas, que acabamos de olhar nos slides. Para fazer isso, mais nas saídas de imagem, podemos remover o nome que você forneceu antes. Vamos remover os atributos de nome e, em seguida, na próxima linha eu vou adicionar alguns novos atributos, para, em seguida, configurar nossos nomes de classe personalizados. Então eu vou começar com entrar classe ativa, e, em seguida, definir é para o nosso nome personalizado de costume enter ativo, claro que isso pode ser qualquer nome. Então eu quero fazer o mesmo para deixar classe ativa, e novamente definir isso para o nosso um nome personalizado. Então eu vou usar costume, deixar ativo. Agora, para vincular isso ao CSS, vamos voltar para o app.vue e, em seguida, ir para baixo para as classes de escala web. Podemos então mudar é ativar fases para ser nossos nomes de classe CSS personalizados. Então o primeiro, em vez de escalar, era personalizado, entrar ativo. Então, claro, o mesmo para a fase de licença de licença personalizada ativa. Então dê um salvamento e, em seguida, vamos atualizar ou verificar isso no navegador. Então, se tudo funciona bem, agora devemos passar o mouse sobre o botão remover imagem, e vê-lo dimensionar para dentro e para fora como antes, mas desta vez usando nossas classes personalizadas. 96. Transições de renderização iniciais: Quando nosso aplicativo é carregado pela primeira vez, o cartão aparece sem estilo. Quando alternamos entre os componentes, adicionamos esses efeitos de desvanecimento. Será bom também, se também pudéssemos desvanecer o cartão quando o aplicativo carrega também. Para fazer isso, Vue.js nos fornece o atributo aparecer. Podemos simplesmente adicionar esses atributos dentro dos elementos de transição. Eu vou para o “app.vue” onde esta transição está localizada. Ele usa transição de desvanecimento aqui em torno dos componentes vivos mantidos. Podemos adicionar isso como um atributo, assim como o nome e também o modo. Basta adicionar “aparecer” e, em seguida, dar que um “salvar”. Agora, se descermos para a classe fade dentro do CSS. Ao usar aparecer, a transição que ela se aplica é tirada do CSS, que já configuramos para entrar e também sair. Uma vez que você tem o desvanecimento da opacidade, este é o efeito usado quando aparece. Podemos ver isso em ação. Se mudarmos uma das durações para três segundos. Eu vou fazer isso na classe aparente. Então “fade-enter-active”. Em vez de 0,5 segundos, vou mudar isto para três segundos e depois “salvar”. Agora, se recarregarmos o navegador, o carregamento inicial leva mais tempo para desaparecer. Mude isso de volta para 0,5 segundos, “atualizar”. Agora podemos ver que é muito mais rápido. No entanto, se quisermos, não precisamos usar automaticamente essa classe de fade existente. Podemos substituir isso com um nome de classe personalizado. Assim como vimos no último vídeo. Podemos usar os mesmos nomes, mas com o prefixo aparecer, como “AppeActiveClass”, para fazer backup para a transição. Vou criar um nome personalizado. Então “Apareça ActiveClass”. Em seguida, podemos adicionar o nosso nome personalizado, 'custom-aparecer-active-class”. Agora isso é configuração, agora podemos ir para baixo para o CSS. Na verdade, vou copiar este nome personalizado. Em seguida, para baixo para o CSS nós podemos configurar isso. Eu só tenho que “fade-enter-active”, colar isso. Mais uma vez deseja configurar a transição para a opacidade. Vamos definir isso para um segundo, por exemplo. Agora, esta transição de um segundo será independente e substituirá quaisquer classes existentes. Vamos ver isso em ação com “atualizar”. Isso parece cerca de um segundo. Isso parece estar a entrar em vigor agora. É assim que podemos adicionar transições à renderização inicial. 97. Transições de elementos e chaves: As transições que analisamos até agora envolveram apenas um único elemento, por exemplo, a transição de imagem remove era um único elemento de botão. Também as opções de texto que fade-lo dentro e para fora, embora estes tinham muitos elementos aninhados dentro, eles ainda vai uma forma como o principal elemento externo. Também podemos fazer a transição entre dois elementos separados. Um acabamento de necessidade comum é quando se usa v-if e v-else. Vou voltar para o primeiro projeto onde podemos aplicar isso também. Mas primeiro vou copiar a animação de escala do app.vue do seu arquivo. Vá até o CSS, suavize a escala, insira ativo. Na verdade, nós renomeamos isso para personalizado, mas por enquanto vamos apenas copiar isso e mudar isso em apenas um momento. Agora vamos abrir o aplicativo de lista de elenco desde o início do curso. Arraste o projeto para o Visual Studio. Então vamos abrir isso clicando duas vezes na página de índice. Vamos começar a trabalhar nisso no arquivo index.html. Temos uma declaração if else para mostrar os nomes adicionados à lista, que é apenas aqui em baixo. Ambas estas instruções if e else seção abaixo exibe uma div. Esta seção se exibe o nome. Se houver nomes disponíveis dentro da matriz de nomes de lista de convidados. Se não, então temos uma div separada logo abaixo, que diz que o texto de nenhum nome adicionado ainda. Isso é perfeito para alternar entre esses dois elementos div. Para fazer isso, tudo o que precisamos fazer é adicionar nosso mapeador de transição familiar. Vamos fechar esta barra lateral para mais espaço. Então, logo abaixo da div com a classe de bloco de cartas. Vamos adicionar o wrapper de transição. Vamos criar algum espaço, depois do “sem nomes” adicionar adjetivo. Podemos encerrar isso, assim mesmo. Agora podemos adicionar o nome da escala para vincular isso com o CSS de animação que adicionamos antes, então vamos adicionar nome à tag de abertura de escala. Em seguida, em nenhum app.css. Podemos então adicionar o CSS que você copiou de todos os projetos anteriores. Tudo o que precisamos fazer é substituir personalizado com o nome da escala ou para o enter ativo e também para a licença ativa para salvar isso. Agora abrimos esta página de índice no navegador e, em seguida, atualizar. Podemos adicionar um nome à lista de convidados e, em seguida, enviar. Podemos ver que o nome é adicionado como antes. Não podemos ver nenhuma dessas escalas em vigor. Isto claramente não funciona. A razão pela qual ele não funciona é porque estamos alternando entre dois elementos div com o mesmo bloco if else. O problema sempre surgirá quando ambos os elementos forem iguais. Se eles são tags div ou qualquer um dos elementos. Para corrigir isso, precisamos de outra chave para cada elemento, então ver JS pode distinguir entre eles. Vamos voltar para o aplicativo. Então, dentro do bloco V-if, vou adicionar uma chave e vamos chamar isto de nomes. Em seguida, no segundo bloco para a instrução else, maioria não irá adicionar uma segunda chave com o nosso nome da lista vazia. Isso pode ser qualquer nome que você quiser, então dê um salvamento. Agora, se voltarmos para o navegador e depois recarregar, vamos adicionar um nome à lista e entrar. Agora podemos ver que temos a escala em transição. Parece um pouco estranho porque estamos fazendo a transição da dobra em vez de apenas um nome. Mas podemos ver claramente que agora está funcionando. Lembre-se, se estamos fazendo a transição entre dois elementos que não são os mesmos, como elementos PA e uma div, não precisaremos adicionar essa chave. Se adicionarmos mais nomes, você pode ver que a transição não se aplica após o primeiro nome. A transição com listas funciona um pouco diferente, e veremos como fazer isso a seguir. 98. Transições de grupo: No último vídeo, mencionamos a adição de transições a uma lista, como a forma como fazemos aqui com o v for loop, funciona um pouco diferente. Vamos começar movendo a transição para cercar apenas v para loop. Vamos cortar a tag de transição de abertura. Então eu vou adicionar isso logo após as declarações v if, começando lá e, em seguida, a tag de transição de fechamento, mas também cortar isso, e depois colar isso logo após o bloco para o loop for. [ inaudível] e vamos abrir isso dentro do navegador e atualizar. Vamos tentar isto. Vamos começar adicionando alguns nomes. Vamos adicionar um segundo. Podemos ver que apenas o primeiro nome que adicionamos apareceu na lista de convidados. Isto parece um pouco estranho. Vamos abrir o console e ver o que está acontecendo. Clique com o botão direito e vá para Inspecionar. Vamos atualizar e abrir o console, então vamos adicionar um nome e uma resposta. Você pode ver que não há nenhum erro lá. Vamos tentar adicionar um segundo nome. Agora vemos um erro vermelho. As opiniões são o console. Vamos abrir isto. A mensagem de erro nos dá uma pista sobre como podemos corrigir isso. Ele diz que a transição só pode ser usada em um único elemento. Precisamos usar o grupo de transição para listas. Vamos dar uma chance. Vamos mudar a transição para um grupo de transição. Vamos tentar escanear no navegador. O primeiro aparece e, em seguida, o segundo também aparece, e não vemos nenhuma mensagem de erro dentro do console. Há uma diferença ao usar o grupo de transição. Ele irá renderizar um elemento span circundante para a nossa lista. Podemos ver isso se abrirmos as ferramentas de desenvolvimento novamente e inspecionarmos os elementos do nome. Clique no Inspetor e, em seguida, vá sobre os elementos de nome. Selecione qualquer uma destas opções. O primeiro está bem. Vamos criar um pouco mais de espaço. Agora, se olharmos para o código dentro das ferramentas de desenvolvimento, estes são três nomes de A, B, C, que você acabou de adicionar, e também tem o span ta, que está em torno de todos esses três nomes. Sabemos que não colocamos isso no código porque não podemos vê-lo aqui. Ao usar os elementos de transição normais, isso não renderiza um elemento. Precisamos estar cientes disso ao usar o grupo de transição. Nós, porém, temos controle sobre qual elemento ele usa. Não estamos restritos a usar apenas elementos de extensão. O tipo de elemento pode ser alterado adicionando atributos de tag, e isso é feito dentro da tag de grupo de transição de abertura. Logo após o nome, eu também vou adicionar os elementos de tag. Vamos adicionar uma tag p, por exemplo. Isso mudará a extensão para ser um p elementos. Ferramentas de adaptação de volta abertas. Vamos dar uma chance a isso. Vamos atualizar, e então precisamos adicionar um nome. Vamos adicionar nome lá, clique no 'Inspector' e selecione nosso nome. Lá eu tenho o nome apenas lá Chris, e agora tem uma tag p circundante em vez do span. Eu vou remover este atributo tag como span, não está bagunçando nosso CSS ou layout, então está tudo bem para deixar lá. Eu só queria te mostrar como fazer isso, caso você tenha algum problema. A última coisa que você pode já ter visto é a primeira vez que adicionamos à lista, o nome não é animado. Vamos fechar as ferramentas de desenvolvimento. Vamos adicionar o nosso primeiro nome, e você pode ver que ele salta diretamente para dentro sem quaisquer animações suaves. Este problema está dentro da nossa condição “if”. A transição só se aplica se o direito de nomes for maior do que zero em vez de igual a. Para corrigir isso, podemos refatorar nosso código e torná-lo conhecido trabalho, mas mais compacto para. Primeiro vamos copiar esta div de abertura completa com condição if, então eu quero excluí-lo. Também removendo a div de fechamento. Agora esta seção mais, queremos remover isso e colar as instruções if que acabamos de copiar de antes. Não precisamos mais da chave, então podemos remover isso. Tudo o que eu quero fazer é substituir o símbolo maior que por iguais. Isso fará com que o texto sem nomes adicionados ainda apareça quando a matriz Names for zero. Então qualquer outra coisa incluirá os nomes na div acima. Agora espero que possamos salvar isso e agora deve funcionar. Dê uma atualização, e vamos ver isso em ação. Adicione um primeiro nome, e agora podemos ver a transição, nosso segundo nome, e assim por diante. Tudo isso está funcionando bem. Se voltarmos ao início, podemos ver o nosso texto sem nomes ainda é adicionado quando não há nomes dentro da matriz, em seguida, ele é substituído por qualquer nome que irá adicionar com animações, todo o meu trabalho. 99. Classe v-move e nomes de transição dinâmicos: Se você se lembrar anteriormente no curso, quando criamos o aplicativo Lista de convidados. Nós configuramos isso, então os nomes adicionados são organizados em ordem alfabética. Se eu adicionar a, b, e depois c. Então se adicionarmos um novamente, podemos ver que isso é colocado no início e todo o resto se move para abrir caminho, em vez de esses nomes apenas saltando para fora do caminho. Este movimento dos elementos também pode ser animado usando uma classe v-move. V move funciona como classes de transição que já olhamos. Nós substituímos o v pelo nome que você deseja adicionar no grupo de transição. Dentro do nosso aplicativo, já temos um nome de escala. Isso criará um nome de classe de movimento de escala, que podemos usar em um arquivo CSS. Então vamos para o aplicativo, .CSS. Vou acrescentar isto agora. Em seguida, adicione isso logo acima dos quadros-chave. Então, mova-se em escala. Então eu quero adicionar uma transição, definir a transformação em 1 segundo. Então, com uma nova classe, somos livres para adicionar qualquer transição que quisermos. Vou fazer a transição do movimento de 1 segundo para tornar a jogada um pouco mais suave. Vamos ver como isso está parecendo no navegador. Então vamos adicionar a, b e, em seguida, c. Agora, se eu adicionar um em novamente, vemos um bom efeito suave para o b. Agora movendo-se para fora do caminho. Então isso agora parece muito melhor. Agora temos essa transição suave quando novos itens são adicionados. Uma última coisa antes de encerrarmos este vídeo é que os atributos de nome que adicionamos à transição também podem ser dinâmicos. Podemos usar tanto v ligação, como tivemos que fazer no passado, ou também podemos usar o mais curto e o cólon para esperar propriedade do estado dentro da tag aberturas. Vamos adicionar dois pontos para tornar isso dinâmico. Em seguida, podemos configurar isso como uma propriedade de dados para alterar seu nome. Então, em vez de escala, se chamarmos isso de efeito1, por exemplo. Podemos então configurá-lo como uma propriedade de dados. Vamos passar para o app.js, e podemos adicionar isso dentro de nossos dados. Então, dentro das tags de dados de abertura e fechamento, eu vou adicionar estes na porcentagem de capacidade do evento. O nome era efetivo1. Podemos adicionar o nosso nome de escala aqui dentro. Então este é apenas um exemplo básico usado em nosso nome de transição de escala. Para usar o CSS existente. Poderíamos resolver várias transições dentro do arquivo CSS e aplicá-las com base no nome da propriedade data. Por exemplo, poderíamos ter uma caixa de seleção ou selecionar entrada para permitir que o usuário altere o tipo de transição. Então clique em salvar, e vamos atualizar dentro do navegador e verificar que nossa transição de escala ainda funciona. Tudo ainda parece estar funcionando corretamente lá. Além disso, essa vinculação também funcionará sobre atributos também, como ganchos JavaScript. Para que pudéssemos voltar ao nosso grupo de transição dentro da página de índice. Poderíamos fazer algo como antes-enter, definir isso para ser um valor ou dois pontos enter, e fazer o mesmo aqui. Isso torna todos esses ganchos e transições realmente flexíveis. Embora tenhamos adicionado apenas transições e animações relativamente simples a este aplicativo, eles podem fazer uma grande diferença no final , tornando nosso aplicativo muito mais polido e completo. 100. Desfecho da seção: transições e animações: Parabéns por chegar ao final desta seção. Espero que tenha gostado de aprender tudo sobre como podemos adicionar transições e animações aos nossos projetos. Esperemos que agora pode ver que, mesmo apenas adicionando alguns pequenos efeitos para nossos aplicativos, ele pode realmente terminá-los fora e torná-los olhar e se sentir muito mais agradável para o usuário. Este é outro ótimo recurso do framework Vue.js e espero que você tenha realmente gostado desta seção. 101. Obrigado: Parabéns por chegar ao final deste curso. Até agora, você deve estar se sentindo muito mais confiante em criar aplicativos usando vue.js. Nós cobrimos muito até agora, incluindo, aprender como instalar vue e como usar a instância vue juntamente com todas as propriedades que podemos adicionar a esta instância, como dados, computados, métodos e filtros. Durante a construção desses projetos, também analisamos a lista e a renderização condicional, vinculação de dados bidirecional e também as diretivas que vue.js nos provedores, para citar alguns. Em seguida, mergulhamos um pouco mais profundamente configurando um fluxo de trabalho melhor usando ferramentas de construção modernas, como o vue-cli, onde, embalar e também bolhar. Isso nos permite dar um passo para construir aplicativos maiores e mais sustentáveis dividindo nosso código em componentes, uma passagem de dados usando vários métodos. Obrigado por fazer este curso e adeus por enquanto. 102. Siga-me na Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido algum conhecimento com isso. Se você gostou desta aula, certifique-se de conferir o resto das minhas aulas aqui no Skillshare, e também me siga para quaisquer atualizações e também para ser informado de quaisquer novas aulas à medida que estiverem disponíveis. Obrigado mais uma vez, boa sorte, e espero, eu vou vê-lo novamente na aula futura.