Vue JS 3: API de composição (com Pinia e Vite)

1. Nossas boas-vindas!: Se você já está familiarizado com o U2 e a API de opções, e este curso ensinará tudo o que você precisa saber para alternar e começar a usar o V3 e a incrível nova API de composição. Meu nome é Danny, estou na Índia desenvolvedor de aplicativos e crio um orçamento, o financiamento pessoal mais bem avaliado para iOS, android, Mac ou Windows. E passei os últimos 12 meses criando 42, que é construído no U3 e na API de composição neste curso, você começará aprendendo as principais diferenças na API de opções e na API de composição criando um aplicativo de API de opções simples e convertendo-o para a API de composição. Em seguida, você dominará todos os conceitos básicos, incluindo dados reativos com jangadas e objetos reativos, métodos, propriedades e relógios computados, ganchos de ciclo de vida, diretivas, roteador de visualização, componentes filho, incluindo as novas formas. Finalmente, os crops emitem e valores modais componentes dinâmicos composable como criá-los a partir do zero e como importá-los da biblioteca de uso de exibição e você aprenderá o gerenciamento de estado usando centavo sobre o incrível sucessor para ver x depois de aprender esses básicos. Então, você vai criar um aplicativo do mundo real chamado bolas de notas do zero, que tem recursos de multidão total. Ele usa gerenciamento de um centavo ou falso estado e demonstra notícias do mundo real de todos os conceitos básicos que você aprendeu anteriormente. Após este curso, você poderá criar seus próprios três novos aplicativos baseados inteiramente na API de composição, completamente do zero. Este curso requer um entendimento básico se você ajustar as opções API, HTML, CSS e JavaScript, confira os vídeos de visualização e estou ansioso para vê-lo no curso. 2. Introdução [Módulo 1]: Oi lá. Meu nome é Danny Cano. Bem-vindo a este curso, Vue.js API de três composições com um centavo no VT. Se você já estiver familiarizado com a V2 e a API de opções. E este curso ensinará tudo o que você precisa saber para mudar e começar a usar o B3 e a API de composição. Aqui está aproximadamente o que vamos fazer neste curso. No Módulo um, vou apresentá-lo ao curso. Explique o que é a API de composição. Mostre minha configuração do editor, que é o código VS, incluindo a instalação de todas as extensões que vou usar. Vou instalar as ferramentas de desenvolvimento Vue para nos ajudar com nosso desenvolvimento. No Módulo dois, vamos apresentá-lo ao site de documentação V3. Vamos instalar o NodeJS para que possamos começar a criar aplicativos V3. E vamos criar um projeto de visualização usando a ferramenta de compilação mais recente com o VTE. Então vamos preparar esse projeto para começarmos a aprender o básico. No módulo três, veremos as principais diferenças entre a API de opções e a API de composição. Vamos criar um aplicativo de API de opções muito simples para nos lembrar como a API de opções funcionou. Em seguida, vamos converter esse aplicativo de API de opções simples para usar a API de composição. Isso nos dará uma maneira muito rápida e simples de ver as principais diferenças entre as duas abordagens. Em seguida, vamos procurar as diferenças entre os dois padrões diferentes que podemos usar com a API de composição, que é o padrão de função de configuração mais antigo e a configuração de script mais recente e superior padrão. No módulo quatro, vamos aprender tudo sobre dados. Vamos aprender sobre dados reativos incluindo refs, objetos reativos. Vamos aprender sobre a vinculação bidirecional e analisaremos dados não reativos. O módulo cinco é sobre métodos. Vamos aprender sobre métodos, propriedades computadas e relógios. No módulo seis, vamos aprender tudo sobre como usamos ganchos de ciclo de vida de forma diferente na API de composição, incluindo ganchos derretidos, ganchos ativados, falcões atualizados e como podemos usar vários ganchos de o mesmo tipo em um único componente. No módulo sete, vamos aprender tudo sobre diretivas na API de composição. Vamos aprender como criar diretivas personalizadas locais, que são locais para um componente individual. Em seguida, veremos como podemos criar diretivas globais de clientes, que podem ser usadas por qualquer um dos componentes em nosso aplicativo. No módulo oito, aprenderemos tudo sobre como usamos o Vue Router de forma diferente na API de composição, incluindo como podemos usar as rotas do dólar, objetos para exibir informações do nosso roteador em nosso e as novas rotas dos EUA e usam roteadores composable. No módulo nove, vamos aprender sobre listas usando o v4, o incrível novo componente de teletransporte. Vamos aprender como usar refs de modelos para que possamos acessar elementos que estão em nosso componente e, em seguida, fazer algo com esse elemento quando nosso componente for carregado, como focar uma entrada, também vamos aprender a usar o próximo tick usando a API de composição. Módulo dez, vamos aprender tudo sobre componentes filhos, incluindo como podemos passar conteúdo para um componente filho usando slots. Ele pode passar dados para componentes filhos usando props. Como podemos emitir um evento de cliente de um componente filho para um componente pai usando emits, como podemos obter um componente filho para modificar uma propriedade de dados em seu componente pai usando o valor modal e atualizar o valor do modelo, vamos analisar componentes dinâmicos que nos permitem trocar o componente que está sendo usado em uma parte específica do nosso aplicativo. E vamos ver como podemos fornecer dados de um componente pai para todos os seus componentes descendentes usando injetos de fornecimento. Módulo 11, você aprenderá tudo sobre composable, que é um dos novos recursos mais empolgantes com o B3, primeiro vamos responder à pergunta, o que é um composable? Em seguida, vamos criar um composable personalizado que nos permitirá compartilhar dados reativos, métodos não relacionados em nossos componentes. Em seguida, vamos instalar e configurar um composable da biblioteca de visualização também. No módulo 12, vamos aprender tudo sobre gerenciamento de estado usando o Pena, que atualmente é o padrão-ouro para gerenciamento de estado em aplicativos de API de composição v3, primeiro responderemos ao pergunta, o que é gestão estadual? Vamos analisar três abordagens diferentes para o gerenciamento do estado em uma visualização três acima usando alguns centavos composable. E vamos olhar para as diferenças entre elas. Então vamos aprender tudo sobre o estado com a Penn. O estado é onde armazenamos todas as nossas propriedades de dados, um repositório de vídeo. Agora vamos aprender tudo sobre ações com Penny. E ações são métodos que estão em nossa loja que nos permitem modificar os dados que estão em nosso estado. Em seguida, vamos aprender sobre getters, o que nos permite obter alguns dados do nosso estado, modificá-los de alguma forma e, em seguida, disponibilizar esses dados para todos os nossos componentes. Até este ponto, teremos abordado todos os conceitos básicos de Fe3 e a API de composição. Vou colocar todo esse conhecimento em prática criando um aplicativo do mundo real chamado Nope balls, que é um aplicativo de anotações que vamos tornar responsivo e apresentável usando a biblioteca CSS Bohmer. Vou apresentá-lo à nota do aplicativo do Paul. Em seguida, vamos criar um novo projeto usando a ferramenta de criação de visualizações mais recente. Novamente, usando o V8, vamos instalar o Vue Router manualmente completamente do zero e configurar tudo do zero. Então, no módulo 14, vamos trabalhar no design do nosso aplicativo usando a biblioteca CSS. Vamos instalar o Bohmer, criar um belo design de navbar que é responsivo, que mostra links diretos para páginas A2 na área de trabalho, mostrará um menu de hambúrguer no celular. E então vamos trabalhar no design da nossa página de anotações. No módulo 15. Vou adicionar alguns métodos de dados e componentes filhos ao nosso aplicativo. Vamos configurar os dados e os métodos para adicionar uma nova nota. Vamos criar um componente filho para nossas anotações. Vamos passar dados para esse componente filho usando props. Vamos configurar uma propriedade computada e vamos adicionar a capacidade de excluir um nó. Módulo 16. Vamos instalar um centavo um conjunto tudo completamente a partir do zero. E também vamos criar um componente reutilizável, que usaremos em várias páginas em nosso aplicativo. Então, depois de instalarmos centavos, vamos configurar os estados para nosso aplicativo, onde armazenaremos todos os dados de nossas anotações. Em seguida, vamos configurar algumas ações para adicionar, excluir e atualizar uma nota. Em seguida, vamos criar um getter na porta da nossa Penny para obter o conteúdo de uma nota com base no ID de uma nota. Em seguida, vamos criar uma segunda página, uma página Stats, que exibirá estatísticas baseadas em nossos dados de notas. Vou montar alguns novos ganhadores para fazer isso. Também vamos criar um componente reutilizável, que usaremos em várias páginas em nosso aplicativo. Vamos tornar esse componente reutilizável personalizável usando props. No módulo 17, vamos adicionar algumas diretivas, relógios e composable às nossas bolas de anotações do aplicativo. Vamos adicionar uma diretiva que nos permitirá focar automaticamente uma área de texto. Vou tornar essa diretiva global e usá-la em várias páginas. Vamos montar um observador. Vamos criar um composable personalizado que nos permitirá compartilhar dados reativos e métodos relacionados entre as páginas. Em seguida, vamos melhorar esse composable, permitindo que ele aceite vários parâmetros. E também vamos adicionar um composable da biblioteca de uso de exibição, o clique fora do composable. Finalmente, no Módulo 18, sou um modal de exclusão do nosso aplicativo, que será exibido quando tentarmos excluir uma nota. E vamos nos pedir para confirmar, vamos configurar o modal, fazê-lo parecer apresentável. Vamos permitir que esse modal modifique dados em seu componente de página pai usando o valor modal e atualize o valor do modelo, vamos reutilizar o clique fora do composable da exibição use para que possamos clicar fora deste modal para fechá-lo, vamos configurar algum controle de teclado piramidal para que possamos clicar em Escape para fechar o modal no processo de fazer isso, também vamos fazer uso de alguns ganchos de ciclo de vida. 3. O que é a API de composição?: A API de composição é o maior novo recurso fornecido com o V3. Mas o que é a API de composição? Bem, isso nos dá uma nova maneira de criar componentes de visualização, uma alternativa à API de opções. Agora ainda podemos usar a API de opções em v3 ups, mas eu consideraria usar a API de composição exclusivamente, especialmente em aplicativos mais complicados e componentes de visualização. A API de composição resolve dois problemas principais que às vezes vemos com aplicativos de API de opções, especialmente ups mais complicados. Número um, ele nos permite agrupar mais facilmente códigos relevantes nas seções de scripts de nossos componentes de exibição. E o número dois, nos permite reutilizar nosso código com mais facilidade em nossos dados reativos e nossos métodos e relógios, etc, usando o composable. Para demonstrar isso primeiro, vamos dar uma olhada neste código da API de opções. Na API Opções, temos nossa exportação padrão e, dentro disso, temos todas as nossas diferentes opções separadas por opções. Quero dizer coisas como métodos de dados, ganchos de ciclo de vida. Neste exemplo aqui temos dois conjuntos de dados completamente não relacionados. Temos uma propriedade de nome de usuário fora da propriedade para determinar se um modal é mostrado ou não. Em seguida, em nossa opção de métodos, temos um método para atualizar o nome de usuário e um método para mostrar o modal alterando essa propriedade de dados. Também temos um gancho de ciclo de vida, o gancho montado, que disparará esses dois métodos. No entanto, todo o código relevante está separado. Temos o nome de usuário exibido. O método para o nome de usuário aqui. O gatilho desse método neste falcão derretido aqui. Isso significa que, em componentes mais complicados, temos que fazer muita rolagem para cima e para baixo para métodos de dados , propriedades computadas, ganchos de ciclo para trabalhar em código relacionado. A API de composição resolve esse problema, permitindo que você remova todas essas opções e permitindo que as agrupem todo o nosso código logicamente. Vamos dar uma olhada em uma versão da API de composição desse código. Neste exemplo, estamos fazendo exatamente a mesma coisa. Estamos configurando variáveis de dados reativas para nosso nome de usuário e nossas propriedades de datas mostradas modais com métodos de configuração para manipular essas propriedades de dados ainda estavam acionando esses métodos na gancho montado aqui e aqui. Exceto que desta vez todo nosso código relevante é agrupado. Todo o código relacionado ao nome de usuário agrupado aqui. Em todo o código relacionado ao modal é agrupado aqui com a API de composição não é apenas propriedades de dados, métodos e ganchos de ciclo de vida. Podemos agrupar, agrupar tudo, seja ele computado, propriedades, relógios, diretivas, etc. Isso torna nossas vidas muito mais fáceis, especialmente quando estamos trabalhando componentes de visualização muito mais complicados e mais longos. O segundo problema, não a API de composição resolve, é que torna muito mais fácil para nós reutilizar o código em nossos componentes usando o composable na API de opções, poderíamos compartilhar código entre componentes usando mixins. Vamos dar uma olhada em nosso exemplo de código de API de opções. Mais uma vez, digamos que queremos reutilizar a propriedade de dados de nome de usuário e nosso método de atualização Username em vários componentes na API Opções, poderíamos extrair esse código em um mixin, como este, onde literalmente simplesmente copiamos a propriedade de dados de nome de usuário no método de nome de usuário octeto e a colocamos em um mixin. Podemos então importar esse mixin para um componente ou um monte de componentes diferentes como este, importar o nome de usuário de mistura de etc. Mas neste exemplo aqui também estamos importando mixin diferente que não está relacionado. Esta mistura modal de mistura. E você pode ver que na palestra MTSU onde o método de disparo do nome de usuário de mixagem, este método de atualização Username. O problema é que não é óbvio de onde esse método vem. É proveniente da mistura de nome de usuário ou vem dos lagos modais, se você não estiver familiarizado com o projeto no qual está trabalhando atualmente, talvez não consiga dizer onde esse método vem sem realmente abrir esses arquivos de mixagem e estou examinando o código. Novamente, isso pode se tornar um grande problema em aplicativos de visualização mais complicados onde temos muitos componentes diferentes, muitos mix-ins diferentes sendo usados. Vamos dar uma olhada em nosso exemplo de API de composição novamente. Digamos que queremos fazer a mesma coisa. Queremos extrair a variável de dados do nome de usuário e queremos extrair este método Username de atualização onde podemos cortá-los e colá-los em um composable, o que seria algo parecido com isso. Em um composable, apenas exportamos a função. E você pode dizer que temos nossa variável de dados de nome de usuário e nosso método Username de atualização também. E podemos então importar esse composable para qualquer componente de visualização que quisermos. Assim, nós apenas importamos a função de nível raiz que exportamos. Então podemos usar a estruturação para extrair apenas as coisas que precisamos desse composable. Nesse caso, estamos extraindo a variável de dados do nome de usuário e o método Update Username. Agora, quando usamos algo do nosso composable, como neste gancho montado, estamos disparando o método Username update. Podemos ver exatamente de onde esse método está vindo. Então, novamente, isso se torna uma enorme vantagem com a API de composição, especialmente em aplicativos muito mais complicados e componentes de visualização. Espero que isso explique as enormes vantagens que acompanham a API de composição em relação à API de opções. 4. Configuração de editor e software: Você pode usar qualquer editor que quiser para este curso, mas vou usar o VS Code porque é gratuito e tem porque é gratuito e tem várias extensões diferentes que facilitarão nossas vidas. Se você quiser que a mesma configuração seja feita, acompanhe. Você quer ir para o ponto de código Visual Studio.com. Basta baixá-lo. Se você estiver no Windows, talvez seja necessário executar um instalador, mas em um Mac, ele fornecerá um arquivo zip com um aplicativo que você pode simplesmente arrastar para a pasta de aplicativos. Vou pegar a pasta Aplicativos e arrastar isso para lá. Agora devemos ser capazes de lançá-lo. Clique em abrir. Agora podemos ver a instalação padrão do código VS. Vou arrastar um projeto de visualização para isso apenas para demonstrar algumas das extensões que vamos usar. Embora você não precise fazer isso. Mas se você tem um projeto de visualização, como eles simplesmente o arrastaram? Vou arrastar os testes desta visualização, que é basicamente apenas o aplicativo de visualização padrão criado com a ferramenta de compilação mais recente. Com isso vamos usar mais tarde, vou clicar em verdades e depois sim. Então eu vou ampliar isso um pouco. Amplie pressionando Command Plus allow. O atalho pode ser diferente no Windows. Vamos instalar algumas extensões. Queremos clicar nisso aqui com esses pequenos quadrados. Este é o armazenamento de extensões. Nas duas primeiras extensões há um tema de ícones e um tema geral para tornar o candidato um pouco mais bonito, mas estes são totalmente opcionais. Então você quer procurar material, eu chamo de tema. Queremos este aqui. Clique em Instalar. E então queremos escolher Material Icon Theme neste menu suspenso. E agora, se voltarmos para o Explorer, você verá que em nosso Explorer aqui temos esses belos ícones para todos os nossos diferentes tipos de arquivos, como esse pequeno e pequeno ícone de exibição componentes de queda. Vamos voltar para a loja de extensões e vou procurar o tema make apps. E isso é o mesmo que eu uso, mas isso é totalmente opcional. Vou clicar nisso. Clique em Instalar. Escolha o nome das maquiagens na lista suspensa. Este é um tema relaxado e fácil para os olhos com um bom destaque de sintaxe suave. Como você pode ver aqui. Se você não gosta desse tema, então há um site onde você pode navegar todos os temas diferentes. Você quer ir. Vs Code themes.com. Você pode encontrar até os diferentes temas claros e escuros aqui. Basta escolher um que você gosta. Só vou fechar isso, voltar para a loja de extensões. Vamos instalar uma extensão chamada ação duplicada. Então, vou procurar por isso. É este aqui. Clique em Instalar. O que isso fará é se voltarmos para o nosso explorador, clique com o botão direito do mouse em um arquivo, agora temos essa opção de duplicar arquivo ou diretório, o que é realmente útil quando você está trabalhando em aplicativos de visualização porque você muitas vezes querem apenas duplicar um componente e depois modificá-lo. E vou voltar para a loja de extensões novamente por padrão, como você viu antes. Exibir componentes não parecem muito bonitos. E eles disseram: Vamos consertar isso com a próxima extensão. E queremos procurar a extensão de visualização volar, APAC. Precisamos rolar um pouco para baixo para encontrar o correto. É este aqui pelo irmão January. Vou instalar isso. Isso tem um monte de extensões diferentes nele por TEA, que é um formato de código que eu realmente vou desabilitar porque eu não sou realmente grande fã de formatos de código é alternando tag que vai renomeie ataques automaticamente. Se renomearmos o alvo de abertura, renomeie a tag de fechamento para nós. Temos alguns trechos de código JavaScript, tag de fechamento automático, que fecharão automaticamente as tags HTML e, em seguida, vários outros. Os principais que queremos aqui nestes dois na parte inferior, eles nos darão um belo destaque de sintaxe, suporte a idiomas, trechos de visualização e coisas assim. Eu quero instalar isso, e isso agora está instalado, mas na verdade vou desabilitar algumas dessas extensões adicionadas. Vou limpar o campo de pesquisa e podemos percorrer nossas extensões instaladas aqui. Vou desabilitar mais bonito, o que, a propósito, acredito que pode interferir na próxima extensão que vamos instalar, mas você pode deixar o braço se preferir e ver se funciona para você. Eu desabilitarei o CSS lint porque não vamos fazer nenhum TypeScript neste curso. Muito sobre isso. Então, vou clicar neste botão Recarregar necessário para recarregar o aplicativo. Você verá que agora temos esse belo destaque de sintaxe para nossos componentes de visualização. A última extensão que vou instalar é chamada de atributos HTML divididos. Quando estamos trabalhando em aplicativos de visualização, muitas vezes temos elementos de componentes de visualização com toneladas de atributos, diretivas e manipuladores de cliques diferentes , tudo isso. Eles podem ficar bastante longos e muitas vezes queremos em cada atributo em uma nova linha como essa, que é dinheiro muito demorado fazendo isso manualmente. Bem, essa extensão fará isso por nós. Vou procurar atributos HTML divididos. É este com o ícone verde. Vou instalar isso. Vou alterar as configurações padrão dessa extensão. Vou rolar esta descrição a seção de configurações aqui. Os sais ou a opção determinarão a ordem dos atributos. Então você pode ver que estamos colocando atributos mais importantes como Vf e Vi. Modelo Vi na parte superior e atributos menos importantes, como ID da classe, mais abaixo em direção à parte inferior. Então, vou selecionar essa matriz e copiá-la. Então vou pular para a engrenagem Configurações e depois as configurações de extensão. Vou marcar esta caixa aqui, que colocará nosso suporte de fechamento em uma nova linha, o que eu prefiro. E, em seguida, sob ordem de assalto, vou clicar em editar em settings.js. Normalmente, muitas florestas essa opção, mas não é. Então, vamos ter que fazer isso manualmente. Muitas vírgulas aqui após esta última opção, forneça algumas citações. E vamos digitar a ordem de classificação de pontos de atributos HTML divididos , não é preenchida automaticamente essa floresta. E, em seguida, selecionarei essa matriz. Cole o que copiamos da página de configurações. Salve isso. E agora, se saltarmos de volta para este arquivo App.vue, se eu selecionar esta tag de imagem, que é uma tag de fechamento automático, e phi for a extensão com Control Alt Shift e a. A propósito, você pode alterar isso atalho de teclado, se você quiser. Você diz que ele divide todos os nossos atributos em novas linhas instantaneamente. Também fará o inverso também. Se eu selecionar isso e phi for a extensão novamente, ela os colocará de volta em uma única linha. Vamos verificar se a ordem dos sais está funcionando. Então, muitos atributos do modelo V no final myVar. Espero que, se executarmos a extensão, este modelo V será colocado no topo, seja, vou desfazer todas as minhas alterações aqui. Salve isso. Acho que essas são todas as extensões que vou usar. Também vamos usar muito o terminal no VS Code para alternar o terminal, basta pressionar Control e Buck doente e ele aparecerá assim. E você também pode fazê-lo desaparecer também com o mesmo atalho, seus prompts podem parecer um pouco diferentes, mas não se preocupe, tudo ainda deve funcionar. 5. Vue Devtools: A próxima coisa que queremos instalar é visualizar ferramentas de profundidade, que nos ajudarão a depurar nossos aplicativos Vue, especialmente quando começamos a trabalhar com centavo, mais tarde, você quer ir rastrear, acompanha pequenos pontos, mais ferramentas e extensões. Um ângulo para este menu à esquerda. E, em seguida, abra a Chrome Web Store. Procure por ferramentas de visualização, desenvolvimento. Há três extensões diferentes aqui. No momento em que estou gravando isso, precisamos usar a versão Beta para V3 ups. Mas como você está assistindo isso no futuro do que a versão de lançamento, esta pode funcionar. Então, eu sugeriria que você experimente a versão de lançamento e pensei que não funciona, depois tente a versão Beta, mas vou instalar a versão beta. Clique em Adicionar à extensão Chrome que agora está instalada. Basta verificar se está funcionando. Vamos iniciar uma visualização no navegador. Vou abrir o projeto que eu tinha aberto antes. Pule para o terminal e execute npm run dev, não funcionou. Acho que isso é porque não tenho as dependências instaladas. Então, vou executar o npm install primeiro. Em seguida, execute o comando npm run dev e clique neste link aqui. Agora ele pode ver esse aplicativo de visualização básica em execução no navegador. Launch, as ferramentas de desenvolvimento. Podemos acessar nossas ferramentas de desenvolvimento do Chrome acessando Exibir Desenvolvedor, Ferramentas do Desenvolvedor. Ou você pode usar o atalho de teclado. Se clicarmos nessa pequena seta, você deve ter uma opção de visualização. E é aí que nossa visão DevTools vive. E você pode ver todos os nossos componentes aqui. Também podemos ver dados relacionados aos componentes. Portanto, esse componente Helloworld custa a propriedade de mensagem, o valor de você fez isso. Eu só vou ampliar um pouco para as ferramentas de desenvolvimento. E isso será especialmente útil mais tarde quando começarmos a trabalhar com a administração da Penn State. 6. Vue 3 Docs e instale o Node.js [Módulo 2]: Ok, vamos começar agora criando um novo projeto de visualização. Primeiro de tudo, vamos para o site view doc. Estou indo para o Google V3. Joe para o site V3. No momento em que estou gravando isso, o View Docs ou prestes a ser recupera massivamente. Vou usar a nova versão dos documentos neste curso porque ele nos mostra como criar um projeto de visualização três com V8 usando a ferramenta de compilação mais recente. Para ir para a próxima versão da documentação, vou pular para a barra de endereços. Acabei de mudar este v3 para preparação. Agora vemos a bela nova documentação. Se você já está vendo isso, então de certa forma você está. E então queremos clicar em instalar. Role um pouco para baixo. Antes de criarmos novos projetos Vue, precisamos ter certeza de que temos o Node.js instalado. Se você não tiver isso instalado, clique neste link. Você provavelmente quer instalar o da esquerda aqui. E você só quer baixar isso e instalá-lo. Ou, se preferir, você pode usar ferramentas de controle de versão de um nó, como nvm. 7. Crie um projeto Vue: Vamos voltar para a página view docs e criar nossa primeira visualização três projetos com VT com a ferramenta de compilação mais recente. Para criar um novo projeto, basta executar esse comando em nosso terminal. Vou apenas ampliar um pouco, NPM nele, ver o último. Vou copiar este VS Code e pular para o terminal. E novamente, podemos alternar isso com comando e voltar doentes. Vou colar esse comando. Inicie-o. A propósito, você quer ter certeza de que está na pasta onde armazena seus projetos. Precisamos instalar este pacote create view mais recente. Então vou apenas digitar y dois, permitir isso. Ele vai nos pedir algumas opções aqui para o nome do projeto, que também será o nome da pasta. Vou usar o básico do painel da API de composição do Vue porque vamos usar isso para aprender todos os conceitos básicos da v3 e da API de composição. Vou escolher o nó para o TypeScript conhecer o suporte ao JSX. Vou escolher sim para adicionar o Vue Router ao nosso aplicativo mais tarde no curso, quando criarmos nosso aplicativo do curso, anotar bolas, vamos escolher notas, essa opção. E, na verdade, vou mostrar como instalar o Vue Router manualmente do zero. Mas por simplicidade, enquanto aprendemos o básico, vou escolher Sim e fazer a ferramenta de construção faça isso segue automaticamente. Novamente para opinião, vou escolher sim, embora mais tarde no curso, vou mostrar a você como adicionar opinião a uma visualização três projetos manualmente. Vou escolher saber para testar novamente para Chipre, saber para ES lint. Você pode querer considerar o uso ES lint em seus próprios projetos. Mas, por simplicidade, vou escolher saber apenas para os propósitos deste curso para que você não receba muitos erros de linting irritantes. Mas se você realmente quiser escolher sim, então você pode fazer, mas eu vou escolher Não. Está acabado. Você pode vê-lo andaime nosso projeto super rapidamente e ele nos diz como começar. Precisamos entrar na pasta criada, executar o NPM install para instalar as dependências e executar npm run dev para iniciar o aplicativo no navegador. Então, vou pular para o localizador. Posso ver que a pasta foi criada aqui. Então, vou arrastar isso para o VS Code. Abra o terminal novamente, execute o NPM install para instalar as dependências. Vamos terminar e podemos iniciar o aplicativo com npm run dev. Podemos ver esse URL aqui. Nós comandamos e clicamos nisso. Agora podemos ver que o V3 básico e V2 começam a ser encapsulados em execução no navegador. 8. Configuração de projeto: Vamos simplificar esse projeto o máximo possível para facilitar a prática dos conceitos básicos da v3 e da API de composição. Primeiro de tudo, eu só queria mudar o título que aparece no topo, que atualmente diz VTE acima. Então, vou pular para index.html, alterar o texto nesta tag de título para ver os conceitos básicos da API de composição. Salve isso. E vemos essa atualização instantaneamente, fechando isso. E agora vamos simplificar nossas páginas ou nossas visualizações. Atualmente, temos apenas duas páginas ou visualizações, a visualização inicial e a exibição. Vamos simplificar a visão inteira primeiro, vou para código-fonte e visualizações, visualização inicial, visualização de pontos. Vou parar que essa mensagem apareça escolhendo Não mostrar novamente. Vou fechar isso. E às vezes vou esconder a barra lateral aqui. Se você quiser ocultá-lo, você pode ir para Exibir e aparência e alternar esta barra lateral de exibição ou usar o atalho do teclado. Só vou esconder isso por enquanto. Vou remover essa tag de script. Vou remover tudo dentro das tags do modelo e começar uma div com uma classe de casa. Dentro desse alote um cabeçalho H1. Basta colocar o texto em casa e salvá-lo. Agora podemos ver que ele está atualizado. Que vou copiar esse código. Pule para a visualização de pontos Vue na mesma pasta. Basta colar sobre tudo aqui. Vou mudar a classe para cerca. Altere o texto no cabeçalho para sobre também. Salve isso. E agora temos duas visualizações muito simples. Agora vamos nos livrar de todas essas coisas no topo. E é isso. Nosso componente de exibição raiz, que é app.vue no source app.vue. Então, vou abrir isso no alto da barra lateral. Quanto você vai esconder o terminal também. Não precisamos ver o terminal na maioria das vezes. Tudo o que eu realmente quero em nosso layout é essa navegação aqui para que possamos chegar às nossas páginas. E esse é esse elemento nav aqui com esses dois componentes de link de roteador. Então, vou copiar esse elemento nav em ambos os links do roteador. E então vou selecionar todo esse cabeçalho. Basta colar esses sobre isso. Corrija o recuo. Precisamos ter certeza de que deixamos esse componente de visualização do roteador porque eles nos permitem exibir nossas visualizações reais, nossa visão inicial e nossa visão. Vou salvar isso. Isso está bonito e simples. Vou remover a seção de script e salvá-la. Vou remover alguns desses estilos, mas nem todos eles porque alguns deles parecem bem iguais. Se arrastarmos isso para fora, podemos ver que além de uma determinada resolução, tudo é movido. Então, vou remover os estilos que estão fazendo isso. Se rolarmos para baixo esta seção de estilo, podemos ver essa consulta de mídia aqui com a largura mínima definida como 100 a quatro pixels. Vou entrar em colapso clicando nesta pequena seta ao lado disso. Selecione toda essa consulta de mídia. Basta excluir isso e salvá-lo. E agora, se aumentarmos a largura do navegador deve permanecer o mesmo, que não precisamos de nenhum dos componentes na pasta de componentes. Agora, vou cair para os componentes de origem. Vou selecionar tudo nesta pasta de componentes clicando no primeiro item, mantendo pressionada Shift e clicando na parte inferior e, em seguida, clique com o botão direito do mouse em Excluir. Livre-se desses. Vemos essa seta, mas se apenas recarregarmos a página , o erro desaparece. E agora temos um aplicativo super simples que podemos usar para começar a aprender os conceitos básicos da v3 e da API de composição. Então, vamos começar a aprender o básico. 9. Opções API vs API API position [Módulo 3]: Vamos criar uma contagem realmente simples usando a API de opções e, em seguida, convertê-la na API de composição. Isso nos ajudará a ver rapidamente as diferenças entre as duas abordagens. E faremos isso na nossa vista de casa. Vou pular para as visualizações de origem na visualização inicial, na visualização de pontos. Só vou me livrar desse título. Só vou ter uma div com um botão e um contador. Muito, um elemento de botão com uma classe de btn com o texto menos. Então eu vou duplicar isso. Altere o texto para mais. E então, no meio, adicionaremos uma extensão com uma classe de contagens. Por enquanto, vou colocar 0 lá e salvar isso. Vamos pensar em alguns estilos para colocar isso no centro, torná-lo um pouco mais bonito. Vamos adicionar um bloco de estilo. Vai direcionar esta div em casa que acabou de ser enviada para tudo. Portanto, não mantenha o texto alinhado ao centro. Salve isso. Um pouco de preenchimento. Então nosso conselheiro não está parado contra o nav. Defina o preenchimento para 20 pixels e salve-o. Vamos aumentar o tamanho desses botões e do contador e torná-lo um pouco de espaço entre tudo. Então, vou direcionar a classe de botão na classe do conselho. Defina o tamanho da fonte para 14 pixels. Salve isso. E definirei a margem para dez pixels, salvo isso. Isso parece muito decente. 10. API de opções - Dados e métodos: Vamos configurar alguns dados e métodos para que isso funcione usando a API de opções. Precisamos adicionar nossa seção de script. E dentro disso, precisamos adicionar nosso padrão de exportação. Vamos configurar nossos dados primeiro. Para este contador, precisamos adicionar um método de dados que retorne um objeto. Podemos colocar todas as nossas propriedades de dados aqui. Muita propriedade chamada conselheiro, defina-a como 0, salve essa. Devemos ser capazes de usar isso em nosso modelo. Agora, livre-se desse 0, nossos aparelhos duplos encaracolados. E vamos colocar o contador aqui e salvar isso. Se eu mudar isso agora, devemos vê-lo atualizar no modelo que fazemos. Vou definir isso de volta para 0. Agora vamos configurar alguns métodos para aumentar e diminuir esse contador. Vou adicionar um manipulador de cliques a este botão. Este botão mais. Clique igual acionará um método chamado contador de aumento. Vamos criar esse método. Então, depois do nosso método de dados, muita vírgula, e então precisamos adicionar nosso objeto de métodos. E criaremos esse método aumentar as contagens de tudo o que queremos fazer é aumentar essa propriedade de contador em uma. Então, para acessar nossas propriedades de dados, podemos apenas fazer esses pontos e depois aconselhar. E podemos apenas fazer plus plus para aumentá-lo em um. Vou salvar isso e vamos ver se isso está funcionando ainda. Podemos aumentar o contador. Então agora só precisamos de um método para diminuir o conselheiro. Então, muita vírgula aqui e eu vou duplicar esse método, renomeá-lo para diminuir contador, apenas alterou o código para este contador de pontos menos menos para diminuir essa propriedade do conselho. E então eu copiarei esse manipulador de cliques do botão mais e adicionarei ao botão menos e apenas alterei o nome do método para diminuir a contagem e salvá-lo ao botão menos e apenas alterei . E agora podemos aumentar e diminuir nosso contador. 11. Converta-o em API de composição: Vamos mudar esse aplicativo simples para usar a API de composição. E uma coisa importante a observar é que tudo no modelo permanece o mesmo. Não precisamos alterar nada no modelo. Geralmente, com a API de composição, tudo no modelo funciona exatamente da mesma forma. Usamos propriedades de dados, métodos de propriedades calculadas exatamente da mesma maneira. O único lugar em que fazemos as coisas forma diferente é na seção de script. Vou comentar esta seção de script da API de opções. Por enquanto. Muitos comentários de abertura no topo e, em seguida, um comentário final na parte inferior dele. Vamos adicionar uma nova seção de script na qual usaremos os scripts da API de composição. Agora podemos usar a API de composição com dois padrões diferentes. Há o padrão de função de configuração, que era o padrão original, que veio na API de composição saiu pela primeira vez. E então temos o segundo padrão, que é o padrão de configuração do script, que foi lançado mais tarde é muito melhor. Mas, por enquanto, vamos usar o padrão de função de configuração original. Embora gostemos de usar o padrão de configuração de script superior. Para usar o padrão de função de configuração, novamente, precisamos adicionar nosso padrão de exportação. Mas não adicionamos opções como métodos de dados, etc. Em vez disso, adicionamos uma função de configuração como essa e colocamos todo o nosso código aqui. Basicamente, todas as nossas propriedades de dados, métodos, propriedades computadas, relógios, etc., todos entrarão nessa função de configuração. 12. API de composição - Dados (refs) e métodos: Vamos configurar uma variável de dados reativa para nosso contador. Agora, na API de composição, existem dois tipos principais de dados reativos. Temos refs e objetos reativos. Vou, vou entrar nestes mais detalhes mais tarde no curso. Bem, basicamente um objeto reativo nos permite criar um objeto de dados com várias propriedades de dados relacionadas dentro do objeto. Enquanto o RF geralmente é usado para itens simples de dados únicos, como uma string e uma matriz ou um número. Então, faz sentido usar um bruto para isso, para configurar um href, podemos simplesmente criar uma constante e dar um nome a ela. Seja qual for o nome que usamos será o nome disponível em um modelo. Então, vamos chamar esse contador, já que esse é o nome que usamos em nosso modelo aqui. E queremos definir isso igual ao método ref assim. E então podemos passar nosso valor inicial dentro desse método. Então, vamos definir isso como 0 inicialmente porque estamos usando esse método ref, precisamos importar esse método de exibição. Então, acima da nossa exportação, precisamos importar de vista. Agora, este representante do conselho ainda não está disponível em nosso modelo. Também precisamos devolvê-lo quando estamos usando a função de configuração, coloca-a diretamente na parte inferior da nossa função de configuração, precisamos adicionar uma instrução de retorno. Essa instrução de retorno sempre deve permanecer na parte inferior da função de configuração. E então só precisamos devolver este conselho ref, assim e salvar isso. E espero que este contador seja esperado no topo agora podemos ver 0 na página. E se alterarmos o valor desse href e salvá-lo, podemos ver que ele está atualizado no modelo. Vou redefinir isso de volta para 0 e salvá-lo. Agora precisamos adicionar nosso contador diminuído e aumentar os métodos de contador. E a maneira como fazemos isso é apenas criando algumas funções nomeadas em qualquer lugar dentro dessa função de configuração. E então precisamos devolvê-los assim como devolvemos este contador ref. Então, vamos criar um método para aumentar o contador. Assim, podemos fazer isso assim com a palavra-chave function, aumento de função. Conselheiro. Podemos fazer uma constante chamada de aumento contador, que definimos igual a uma função como esta, que é o método que eu costumo usar. Tudo o que queremos fazer é aumentar esse contador ref em um. E você pode pensar que seríamos capazes de contar mais, mais. Mas, na verdade, isso não funcionará com a API de composição porque quando criamos um bruto, eles realmente criam um objeto e o valor de nossa ref é armazenado em uma propriedade chamada value. Então, para acessar isso, precisamos realmente fazer o valor do ponto do conselheiro e, em seguida, podemos fazer mais mais novamente, para usar esse método em nosso modelo, precisamos devolvê-lo. Então, podemos pensar nisso para esse objeto de retorno como esse contador de aumento. Como já temos o manipulador de clique OK aqui, que está disparando o mesmo método, ele deve funcionar. Então vou salvar isso, clique no botão mais e isso está funcionando. Agora só precisamos criar o método de contador diminuído. Vou duplicar esse método de cálcio aumentado, renomeá-lo para diminuir o contador e apenas mudar o plus plus para menos para que ele diminua o valor do contador em um. E novamente, precisamos devolver isso muito para nossa declaração de retorno aqui embaixo, diminuir delta, salvar isso. E espero que ambos os botões estejam funcionando, mas tudo está funcionando. 13. Configuração de script - Uma maneira mais fácil!: Em poucos três pontos para uma nova sintaxe ou padrão para a API de composição foi introduzido, que é o padrão ou sintaxe de configuração do script. configuração do script nos permite tornar nossos componentes muito mais simples, menos confusos e mais fáceis de gerenciar, nos permite livrar-se do padrão de exportação, livrar-se da função de configuração e, o mais importante, se livrar da declaração de retorno. Com a configuração de scripts A2, não precisamos mais nos preocupar em garantir que todas as nossas propriedades de dados, métodos, propriedades computadas, etc., sejam retornados. Agora, em um componente simples como este, pode não fazer muita diferença, mas em um realmente complica com centenas de componentes que cada um tem sons de propriedades de dados diferentes, métodos, observadores, propriedades computadas, etc. Isso realmente torna nossa vida mais fácil não ter que manter constantemente essa declaração de retorno atualizada toda vez que alteramos qualquer uma de nossas propriedades de dados, métodos, ou renomeá-los, etc. Para mim, a Fujitsu, que atualmente está trabalhando, passou um dia inteiro convertendo cerca de 100 componentes deste um padrão de função de configuração para o novo script padrão de configuração. E esse foi um dia muito chato, mas valeu a pena porque agora o aplicativo é muito mais fácil de trabalhar. A propósito, o padrão de configuração do script é o padrão que vou usar para o resto do curso porque é muito mais simples e é o padrão que a equipe do Vue recomenda. Então, vamos converter esse código para o novo padrão de configuração de script. Vou comentar esta seção de script. Vamos adicionar uma nova seção de script aqui. Agora, não precisamos adicionar nosso padrão de exportação e não precisamos adicionar essa função de configuração. Tudo o que precisamos fazer é adicionar um atributo a essa tag de script de abertura como esta. Agora podemos colocar todo o nosso código aqui, todas as nossas propriedades de dados, métodos, etc. E nem precisamos retornar nenhum desses. Vamos apenas copiar nossos dois métodos em nosso conselho ref do código antigo. Cole-o diretamente aqui e apenas conserte o recuo. Ainda precisamos importar esse método ref da exibição. Então, vou copiar isso. Acabamos de colocar todas as nossas entradas no topo desta seção de script Neste. E agora não precisamos retornar nossos dados ou nossos métodos. Quaisquer propriedades ou métodos de dados são propriedades calculadas que declaramos no nível superior desta tag de script estarão disponíveis em nosso modelo automaticamente. Então, se eu salvar isso agora, ele deve estar funcionando imediatamente. No entanto. Ainda está funcionando. Agora reduzimos nossa seção de script de, digamos, 21 linhas para apenas 11 linhas. Simplificamos massivamente nosso código e não precisamos mais nos preocupar com essa declaração de retorno irritante. 14. Refs [Módulo 4]: Existem três tipos principais de dados que podemos usar em um aplicativo de API de composição. Representantes, que já adicionamos neste aplicativo, objetos reativos e dados não reativos. Já cobrimos refs. Basicamente, apenas configuramos uma constante ou um conjunto de variáveis que seja igual ao método ref que precisamos importar da view e, em seguida, basta passar o valor inicial. Podemos fazer alterações nesse valor acessando a propriedade value da constante que configuramos, não podemos quantos representantes quisermos. Então, vamos adicionar outro. Digamos que queremos um título para o nosso contador e queremos poder mudar esse título programaticamente, tudo com encadernação bidirecional. Vamos adicionar outro representante aqui. Poderíamos fazer contagens const no título, definir isso igual a um método ref, passar um valor inicial de, digamos meu contador. Ou podemos mostrar isso livrando-se da palavra-chave const e depois adicionando uma vírgula após o primeiro const. Mais uma vez, não precisamos devolver essa constante. Ele deve estar disponível em nosso modelo imediatamente. Então, vamos adicionar a tag H3, tanto essa div produzirá esse título. Então, chaves dobradas, título do contador, salve isso. Agora podemos ver esse título no modelo para deixar um pouco mais claro o que é esse título, vou adicionar um ponto e vírgula após esse título. Agora, se alterarmos o valor desse gráfico, veremos a atualização do título, o que fazemos. 15. Vinculação de dados bidirecionais: Na maior parte, a vinculação de dados bidirecional funciona exatamente da mesma forma na API de composição da mesma forma que na API de opções. Apenas para demonstrar isso, vamos adicionar uma entrada à nossa página, o que nos permite modificar esse título do contador que armazenamos neste ref de dados após essa div com nosso contador e botões muito de div com uma classe de edição. E então, dentro disso, vou adicionar o cabeçalho h4 com o texto, editar contador, título, dois pontos e, em seguida, muito. E salve isso. Só vou adicionar um pouco de margem ao topo desta div. Vou pular para o enquanto estivermos nisso. Vamos remover todos esses comentários antigos. E vou pular para a seção de script. Target, a classe de edição, que acabamos de começar com essa queda, e muita margem, superior a 60 pixels e salvamos isso. Agora vamos vincular essa entrada ao contador, este título do contador rref. Então, para fazer isso, podemos simplesmente pular para essa entrada e adicionar uma diretiva modelo V. Basta defini-lo igual a essa contagem constante, o título, o título do conselho. Diga isso. Agora podemos ver nossa contagem do título nesta entrada. E se mudarmos, não está atualizando o título aqui. Talvez só precisemos atualizar, tentar novamente ainda se alterarmos o título do cabeçalho nesta entrada, nós o vemos atualizado em nosso título ou pagá-lo. 16. Objeto reativo: Podemos ver que refs são úteis para armazenar itens simples e independentes de dados, como um número ou uma string, ou talvez uma matriz ou um booleano. Mas e se quisermos armazenar vários dados diferentes relacionados em um único objeto. Um pouco como fizemos com o método de dados em Apps de API de opções. Bem, podemos fazer isso com um objeto reativo. Digamos que queremos armazenar nosso balcão e nosso título de conselheiro juntos em um único objeto. Como esses dados estão relacionados , poderíamos fazer isso com um objeto reativo. Para configurar objetos reativos, criamos novamente um const ou podemos usar uma variável. Agora damos a isso um nome para que possamos chamá-lo de dados de conselheiro. E definimos isso igual ao método reativo. Precisamos importar isso do modo de exibição. Então, podemos simplesmente adicionar isso ao nosso objeto de importação aqui, reativo. Podemos simplesmente passar um objeto para esse método reativo e podemos colocar todas as nossas propriedades de dados aqui. Vamos criar uma propriedade chamada Count para o nosso contador, dar a ele um valor inicial de 0. E então muita propriedade chamada title, o título, e eu definirei isso no meu contador, salve isso. Vamos usar os dados desses objetos reativos em nosso modelo em vez dos dados desses refs. Se quisermos usar o conselheiro que está nesses objetos reativos aqui, podemos apenas fazer contagem de pontos de dados do conselheiro. Se quisermos usar o título, ele está nos objetos reativos. Podemos simplesmente alterar isso nesta tag de cabeçalho para o título do ponto de dados do conselheiro. Vamos atualizar esse modelo V. Para usar esses objetos reativos. Definirei esse modelo V para aconselhar dados, pontos, título e salvarei isso e recarregarei. E vamos ver se nosso título está gasto. Ok, sim, isso ainda está funcionando na vinculação de dados bidirecional ainda está funcionando também e contas ou está funcionando, podemos ver 0 exibido lá. E se eu alterar o valor das contagens de pontos de dados do contador, poderemos vê-lo atualizar. No entanto, esses fundos não estão funcionando. E isso porque esses métodos, o método de conselho aumentado e o método do conselheiro de diminuição, ainda estão manipulando esse href e não o desconto que está em nosso objeto reativo. Então, vamos atualizar esses métodos. Em vez de contagens ou valor de ponto mais mais, podemos apenas fazer dados de conselheiro, contagem de pontos mais mais. Então, no método conselho diminuído, podemos apenas fazer contagens de dados, contagem de pontos menos menos. Observe que não precisamos usar o valor de ponto quando estamos usando dados que estão em objetos reativos, apenas usamos o nome direto da propriedade, contagem de pontos de dados do conselheiro. Agora vamos salvar isso e ver se esses botões estão funcionando. Sim, isso está funcionando de novo agora, não estamos mais usando esses refs. O código Vs nos mostra isso acinzentando um pouco. Então, vamos apenas comentar isso. Como não usamos mais esse método ref from view, podemos removê-lo dessa instrução de importação assim e salvá-la. 17. Dados não reativos: Às vezes, em nossos componentes de exibição, queremos ter uma propriedade de dados que não precisa ser reativa. Isso é fácil de fazer com a API de composição. E eu recomendaria que quaisquer propriedades de dados em seu componente que não precisem ser reativas, você não reativa, pois isso melhorará o desempenho do aplicativo. Digamos que queremos armazenar o título do nosso aplicativo em uma variável de dados, mas não precisamos que ele seja reativo. Não precisamos ser capazes de alterar o valor desse título programaticamente e vê-lo atualizado no modelo. Tudo o que precisamos fazer é configurar uma constante ou variável. Então, criarei uma constante chamada título. Basta definir isso igual a uma string. Portanto, não estou usando um reativo, apenas uma constante padrão de pântano que é definida como uma string. Vou definir esta corda para minha incrível Kaltura e salvar isso. Essa constante agora deve estar disponível em nosso modelo. Vou pular para o modelo dentro desta div com a classe de casa. H2 produzirá essa constante, então chaves dobradas duplas. E então lá fora, isso salvará isso. E agora podemos ver nosso título na página. E se mudarmos essa string para meu ok, contra-agir, que tem um pouco mais apt, então veremos essa atualização na página. 18. Métodos [Módulo 5]: Já aprendemos a adicionar métodos ao nosso componente. Vamos analisar rapidamente como podemos passar parâmetros para métodos. Primeiro, vou remover esses comentários de antes. Então, digamos que queremos ser capazes de aumentar nosso contador em um número específico, em vez de apenas um. Bem, poderíamos passar o número que queremos aumentá-lo por um parâmetro em nossas contrapartes de aumento. Aqui, podemos simplesmente iniciar parênteses para o nome do nosso método passando um valor. Vamos passar em um por enquanto. E se saltarmos para o nosso método de contador aumentado, agora podemos receber esse parâmetro como este. Como uma abreviação, poderíamos simplesmente remover esses parênteses se quisermos. Basta fazer logout para se certificar de que ele está chegando através de console.log e valor. Salve isso. Vou abrir o Chrome DevTools. Você pode ir para Exibir no Chrome Developer Tools ou usar o atalho de teclado no console aqui embaixo. Se eu clicar no aumento contável, sim, podemos ver esse número um sendo bloqueado. Vamos ajustar a lógica e nosso método de contador aumentado para que ele aumente a contagem em nossos objetos reativos pela quantidade que estamos passando em vez de apenas por um. Assim, podemos fazer contagens de contagem de pontos de dados igual a contar os dados, contagens de pontos mais quantidade ou, como abreviação, poderíamos fazer contagem de pontos de dados de contador mais quantidade igual. Vou salvar isso. Certifique-se de que ele ainda esteja funcionando. No entanto, ainda está funcionando. Agora poderíamos adicionar um segundo Boltzmann para incrementar o contador em dois. Vou voltar para o modelo e duplicarei esse botão de contador de aumento, mas passaremos para esse método. Vou mudar o texto neste botão para mais, mais. Salve isso, e vou apenas diminuir um pouco. Agora, quando clicamos neste botão, podemos ver que nosso contador é aumentado em dois. Bem, esse botão ainda está aumentando em um. Vou rolar para baixo e remover esse console.log. Vamos fazer o mesmo por nossa diminuição do câncer. Vou duplicar esse botão Contador diminuído. No segundo botão, passaremos o valor um e, em seguida, no primeiro botão, passaremos o valor para alterar o texto no botão para menos. Se isso, precisamos atualizar esse método de conselheiro diminuído. Então, novamente, podemos fazer contagens de pontos de dados do Council igual contagens de contagem de pontos de dados menos quantidade. Ou não precisávamos passar a quantidade fossa aqui. Ou, como abreviação, podemos fazer contagem de pontos de dados do Conselho menos a quantidade igual. Então, vamos salvar isso e ver se isso está funcionando. Basta arrastar o console um pouco. Este botão está diminuindo o contador em um. Este botão está diminuindo em dois. A propósito, se você quiser ter acesso ao objeto de evento, poderíamos fazer isso apenas passando um segundo parâmetro para o nosso método. Então eu vou passar para este aqui. Sobre isso precisa ser nomeado evento Dollar. E agora, se saltarmos para o nosso método de conselheiro aumentado, precisará colocar os parênteses de volta. Como haverá dois parâmetros, podemos passar o objeto de evento assim. Você pode usar qualquer nome que quiser, mas eu vou usar um. Agora devemos ser capazes de fazer logout. E então, quando clicamos nisso aumentou em uma voltagem, podemos dizer que o objeto de evento está sendo desconectado. E podemos então ter acesso a qual elemento foi clicado, o paradeiro que o cursor estava, etc. Antes de seguirmos em frente, vamos remover este console.log. 19. Propriedades computadas: As propriedades calculadas são propriedades que geralmente são geradas com base em dados reativos, que são armazenados em cache e atualizadas somente quando há alterações de dependências. Por exemplo, poderíamos criar uma propriedade computada que pegue o valor desse contador, manipula-a de alguma forma. O valor da nossa propriedade computada só será regenerado sempre que o contador mudar. Então, vamos nos lembrar como adicionamos propriedades computadas usando a API de opções. Vou pular para a parte inferior desta seção de script e adicionar outra seção de script. O padrão de exportação. A API de opções. Tivemos que adicionar uma opção computada. Tivemos que colocar todas as nossas propriedades computadas aqui, como minha propriedade computada. Então, dentro disso, executaríamos alguma lógica com base em uma propriedade de dados. Então nós devolveríamos alguma coisa. Isso significava que todas as nossas propriedades computadas precisavam ser agrupadas neste objeto calculado. No entanto, com a API de composição, podemos criar uma propriedade computada literalmente em qualquer lugar em nossa seção de script. Isso é realmente útil, especialmente em componentes maiores porque significa que podemos agrupar todo nosso código relevante, o que é algo que eu demonstrei no módulo um. Como eu disse no módulo um, essa é uma das principais vantagens da API de composição. O fato de nos permitir agrupar todo o nosso código relacionado, sejam propriedades de dados, métodos, propriedades computadas, relógios, ciclo de vida, ganchos, etc. Vamos apenas comentar este exemplo da API de opções aqui. Adicionaremos uma propriedade computada ao nosso código da API de composição. Agora, para criar uma propriedade computada, precisamos importar o método computado da exibição. Podemos começar isso com nossa entrada aqui, calculado por vírgula. E agora vamos configurar uma propriedade computada que determina se o contador é ímpar ou par. E, em seguida, espalhe isso na página. Primeiro, vamos configurar o narco após essa div com todos os nossos botões e o contador, muita tag de parágrafo, e eu vou apenas adicionar o texto. Este contador é estranho. Olá, Vamos tornar essa palavra estranha dinâmica usando nossa propriedade de computador. Vou salvar isso. Vamos rolar um pouco para baixo. E, novamente, podemos criar nossa propriedade de computador em qualquer lugar que quisermos. Acho que faz sentido colocá-lo após um objeto reativo sem dados. Para criar uma propriedade computada, só precisamos acionar o método computado. Dentro disso, só precisamos passar um método como esse. Então precisamos devolver alguma coisa. Para fazer uso dessa propriedade do computador, precisamos atribuí-la a uma constante ou a uma variável. Então vou atribuir isso a uma constante chamada ímpar ou par. Opa, eu escrevi isso errado. Ímpar ou par. Podemos usar o operador restante para descobrir se um número é ímpar ou par. Assim, podemos apenas fazer IF e , em seguida, acessar nossas contagens. Assim, podemos apenas fazer contagens de contagem de pontos de dados. Se a contagem de pontos de dados do contador, o restante dois será igual a 0. Em outras palavras, se dividirmos nosso valor cout por dois e obtivermos o restante, bem, se for um número par e dividirmos por dois, o restante será 0. E sabemos que o número é par. Se for esse o caso , podemos retornar até mesmo. Caso contrário. Caso contrário, podemos simplesmente retornar estranho. Agora podemos realmente nos livrar disso se quisermos sentir que nunca chegará a essa linha. Se esta primeira linha for verdadeira, vou me livrar da palavra mais em Salvar que essa propriedade computada agora está pronta para usar em nosso modelo. Vou pular para o mercado que acabamos de começar este parágrafo. Remova a palavra ímpar, uma chave dupla e ímpar, basta exibir nossa propriedade computada ímpar ou par. Salve isso. Podemos ver que o conselheiro é 0 e diz que este contador é par. Nós o aumentamos em um. E diz descontos ou é estranho. Nós o definimos para dois e é mesmo de novo, etc. 20. Uma nota sobre filtros: Se você está se perguntando como fazer filtros com V3 na API de composição, bem, eles foram realmente removidos da V3. Se você apenas visualizar três filtros em piada para esta página a partir do guia de migração, podemos ver que eles foram realmente removidos. Em vista, poderíamos adicionar um objeto de filtros à nossa exportação padrão. E poderíamos criar um filtro que aceitaria o valor e depois retornaria outra coisa. E então poderíamos usar esse filtro em nosso modelo apenas adicionando um tubo seguido pelo nome do filtro. Se rolarmos para baixo até o a3x, atualizar, os impulsos são removidos, não serão mais suportados. Em vez disso, recomendamos substituí-los por chamadas de método ou propriedades computadas. Agora, isso não é um grande problema porque podemos facilmente obter a mesma funcionalidade de um filtro usando propriedades ou métodos computados. Fato, o que fizemos aqui com esse estranho ou mesmo é como um filtro. Estamos pegando um valor e produzindo algo com base nesse valor. Mas uma das coisas úteis sobre paredes de filtros, poderíamos facilmente criar um filtro global, usá-lo em todo o nosso aplicativo. Então, digamos que tivéssemos um aplicativo que exibia moeda em muitas páginas diferentes. Poderíamos criar um filtro que converteria um número em uma cadeia de moeda formatada com um dólar no início e talvez algumas vírgulas para separar os zeros. No entanto, se V3 conseguirmos alcançar a mesma coisa criando uma propriedade computada ou um método para tornar essa propriedade ou método computado global usando composable. E então podemos usar facilmente essa funcionalidade qualquer maneira, eu dentro do nosso aplicativo. E aprenderemos mais sobre isso mais tarde no curso, quando abordarmos o composable. 21. Assistir: Os relógios nos permitem assistir essencialmente a uma propriedade de dados reativa e eles fazem algo sempre que ela muda. Vamos nos lembrar como fizemos isso com a API de opções. Então, vou mover esse comentário de encerramento aqui. Digamos que tivéssemos um método de dados. Dentro disso, tínhamos uma propriedade count definida como 0 inicialmente. E então queremos assistir a essa contagem e digamos que faça algo quando atingir um valor específico, onde teríamos que adicionar uma opção de exibição, objeto para exportar. E então, dentro disso, poderíamos adicionar um observador para assistir esses contadores assim. Poderíamos criar um método chamado count. Podemos passar em dois parâmetros, a nova contagem na contagem antiga. Então podemos fazer algo sempre que a contagem mudar, poderíamos fazer algo como se você contar for igual a 20, então poderíamos alertar a mensagem. Novamente, isso significava com a API de opções que todos os nossos relógios precisam ser agrupados dentro desse objeto do relógio. E isso significava que esses relógios costumam ser muitas, muitas linhas de código longe dos dados reais com os quais eles estão trabalhando. No entanto, com a API de composição, podemos configurar nossos relógios em qualquer lugar que quisermos em nossa seção de script, o que significa que podemos facilmente agrupar relógios com seus dados relevantes. Vou soltar esse comentário final e colocá-lo na parte inferior da seção de script novamente, vamos fazer isso. A API de composição configura muito menos um observador, que é nossa contagem e nosso dispara um alerta quando chega a 20. Para usar um observador, precisamos importar o método do relógio da exibição. E faz sentido colocar nosso observador após os dados que vamos assistir. Então, vamos colocar esse hit para criar o observador. Só queremos disparar o método do relógio. O primeiro parâmetro deve ser o item de dados reativo que vamos assistir se nosso conselho estivesse em uma referência, como contagens const é igual a ref assim, então poderíamos simplesmente passar na contagem o primeiro parâmetro. Embora, como nosso contador esteja em um objeto reativo, ele é, na verdade, uma propriedade de dados aninhada. E não podemos realmente fazer contagem de pontos de dados do conselheiro. Isso não vai funcionar. Então, temos que usar um getter para realmente pegar essa propriedade de dados aninhada para nós. E poderíamos fazer isso assim, para que possamos simplesmente fazer parênteses e, em seguida, um símbolo de seta, e então podemos simplesmente adicionar a propriedade de dados aninhados que queremos pegar, que é dados de conselheiro, contagem de pontos. E então, para o segundo parâmetro, adicionamos um método, parênteses e, em seguida, chaves de seta. E novamente, podemos acessar o novo valor e o valor antigo aqui. Então, novas contagens, contagens antigas. Vou me livrar dessa contagem REF que adicionamos. E então devemos ser capazes de bloqueá-los agora, um logout, nova contagem, salvar isso, recarregar a página. E se mudarmos nosso contador, podemos ver que nosso observador está sendo disparado e podemos ver uma nova contagem no console. E toda vez que ele mudar, observador será demitido novamente. Vamos mostrar alertas se nosso contador atingir 20. Podemos fazer apenas se a nova contagem for igual a 20, alerta. Caminho a percorrer. Você chegou a 20. Como não estamos usando a contagem antiga, não precisamos realmente declará-la aqui, então eu vou me livrar disso e salvar isso. E vamos ver se isso está funcionando. Então, espero que, quando chegarmos ao 20, dizemos um alerta. 22. Ganchos de vida - Montado [Módulo 6]: Os ganchos do ciclo de vida nos permitem executar código em diferentes estágios do ciclo de vida dos nossos componentes. Podemos executar código quando um componente é montado, como quando ele é carregado no navegador. Ou podemos executar código quando ele é desmontado como um descarregado do navegador. E vamos nos lembrar como usamos ganchos de ciclo de vida na API de opções. Vou rolar para baixo até a seção de script novamente. Basta pegar o comentário final e colá-lo na parte superior. Na API Opções, adicionaríamos ganchos como este. Para adicionar um gancho montado, por exemplo, apenas adicionaríamos um método montado à nossa exportação padrão assim. Então poderíamos fazer coisas. Quando o componente é carregado. Poderíamos adicionar um gancho desmontado como este. Faça coisas quando o componente for descarregado do navegador. E agora vamos colocar alguns logs do console aqui. Console.log montado e console.log montado e salve isso. E isso ainda funcionará a propósito, podemos realmente combinar a API de composição com a API de opções. Você verá se eu recarregar a página, podemos ver montado bloqueado no console. E se eu sair da página, você poderá ver o desmontado sendo bloqueado porque nossa visualização inicial foi removida do navegador. No entanto, não recomendo usar a API de composição e a API de opções ao mesmo tempo. Número um, torna nossos componentes realmente bagunçados e inconsistentes. E o número dois é difícil de se comunicar entre as diferentes seções de scripts. Por exemplo, em nosso código de API de opções, não podemos acessar propriedades de dados que estão na tag de script da API de composição. Mas de qualquer forma, porque com a API de opções, só podíamos adicionar um gancho de cada tipo, um gancho montado e um no gancho montado. Isso significava que muitas vezes precisamos dele para agrupar muita lógica não relacionada completamente nesses falcões. Mas na API de composição não podemos tantos ganchos quanto quisermos, quantos ganchos montados quisermos e quantos ganchos desmontados quisermos. E podemos colocar isso em qualquer lugar que quisermos dentro da nossa seção de scripts. Vamos apenas comentar esta seção de script da API de opções. Mais uma vez. Vamos adicionar todas as montagens que ganchos a esse componente. Lote estes em ordem de execução. O primeiro é o gancho de montagem antes, que será disparado logo antes do componente ser carregado no navegador. Para fazer isso na API de composição, pensamos em um método chamado antes da montagem. E então passamos um método para esse método, podemos colar todo o nosso código aqui que queremos disparar antes que o componente seja montado. Então, vou fazer logout antes e depois vou duplicar isso. E em seguida, temos o gancho desmontado para adicionar assim. Então temos o R&B para gancho desmontado. Então, antes de desmontar. A propósito, estou apenas fazendo uma seleção múltipla aqui mantendo pressionada a tecla Alt, selecionando os textos, mantendo pressionada a tecla Alt e, em seguida, selecionando os outros textos. Finalmente, temos o gancho desmontado. Para isso, adicionamos um método chamado desmontado. Para usar esses ganchos, precisamos importá-los da exibição. Então, vou fazer uma seleção múltipla aqui selecionar todos esses nomes de métodos e copiá-los. E pule para nossa importação, adicione uma vírgula e cola-as. E então eu vou juntar isso novamente pressionando Command Shift e pague para mostrar a paleta de comandos. Acho que o atalho é diferente no Windows, apenas disparando o comando join lines. Então vou começar algumas vírgulas entre estes. Vamos salvar isso e ver se está funcionando. Vou recarregar a página. E sim, podemos ver antes da montagem ser bloqueada e, em seguida, na montagem, ser bloqueada. E se saltarmos para a página sobre, poderemos ver antes que o Mount seja bloqueado e desmontado sendo bloqueado. Uma coisa a saber é que não há ganchos criados ou antes criados na API de composição. E isso ocorre porque o código que colocamos no nível raiz das tags de script será efetivamente disparado neste momento. Portanto, todo esse código em nossa seção de script está efetivamente sendo acionado antes que o componente seja criado. 23. Ganchos ativados: Vamos ver como não podemos ativá-lo em ganchos desativados com a API de composição. Fazemos isso da mesma maneira. Vou duplicar isso no gancho montado. Acabamos de adicionar o gancho ativado, vamos fazer logout no ativado. E então, para o gancho desativado, apenas usamos o desativado. Novamente, precisamos adicioná-los à nossa importação ou parece que o VS Code é adicionado automaticamente. Estes, basta adicioná-los aqui. Se não o fizesse. Vou salvar que agora esses ganchos só serão disparados se nossos componentes forem mantidos vivos. Isso significa que o componente continua sendo executado em segundo plano, mesmo quando ele não está sendo exibido na página. Para fazer isso, precisamos envolver nosso componente de visualização do roteador em tags keep-alive. Queremos pular para app.vue. Queremos envolver essa visualização do roteador em tags keep-alive. Podemos usar uma caixa de traço assim. Podemos usar o estojo Pascal. Usarei o caso Pascal, já que é isso que estamos usando em todos os lugares do nosso AP. Só quero colar essa visualização do roteador dentro dessas tags. Salve isso. Na verdade, fazemos isso de forma diferente na V3 porque vemos esse aviso aqui. visualização do roteador não pode mais ser usada diretamente dentro da transição ou manter adereços de slot ativos. E isso nos dá um pequeno exemplo aqui de como fazer isso. Podemos simplesmente copiar isso, colá-lo aqui. Agora ele deve manter todos os componentes que são carregados nessa visualização do roteador vivos e devemos ver que estão ativados e desativados o trabalho do Hook. Então, vou salvar isso e recarregar o aplicativo. Podemos ver ativado lá. Se sairmos desta página, deixe-me ver a esperança desativada que está sendo disparada também. Agora eu não quero manter as páginas vivas nisso, então vou desfazer tudo o que mudamos no app.vue para que tenhamos nosso componente de visualização do roteador por conta própria. E então eu vou salvar isso. 24. Ganchos atualizados: Também temos os ganchos atualizados que são disparados sempre que nosso modelo muda. Por exemplo, sempre que nosso conselho mudar, vamos adicionar esses ganchos a este componente Vue ponto de vista inicial. E isso está um pouco confuso agora. Então, vou remover todos esses ganchos e remover as entradas desses ganchos. Indo adicionar um ligado antes do gancho de atualização. Vamos fazer logout antes da atualização. Esse gancho será disparado pouco antes do modelo ser atualizado. Então, se clicarmos neste botão nas alterações do contador, isso será disparado pouco antes do modelo ser atualizado. E então temos o gancho atualizado que será disparado no ponto em que o modelo for atualizado e nós vamos apenas fazer logout na atualização. Na verdade, meu BOD não é tudo atualizado, está tudo atualizado. Então, vou consertar isso. Mais uma vez. Precisamos importá-los. Em seguida, será acionado antes das atualizações, atualizado da exibição e salvará isso. Se recarregarmos, você pode dizer que esses ganchos não são acionados quando o componente é carregado pela primeira vez. Se eu clicar neste botão e o contador aumentar e nosso modelo mudar, então poderemos ver esses ganchos sendo acionados primeiro o gancho ligado antes da atualização, seguido pelo gancho atualizado. 25. Vários ganchos!: Antes de seguirmos em frente, vamos demonstrar adição de vários ganchos do mesmo tipo. Só vou remover esses ganchos atualizados. Vou remover as entradas. Remova os ganchos naturais. Digamos que queremos fazer algumas coisas relacionadas ao título do nosso aplicativo quando o componente for carregado pela primeira vez. Também queremos fazer algumas coisas relacionadas ao nosso contador quando o componente é carregado pela primeira vez também. Então podemos parar para falcões não derretidos. Vamos importar no modo de exibição montado. E depois do título do nosso aplicativo, não podemos ser desmontados gancho. Vou apenas sair, fazer coisas relacionadas ao Título. E então digamos que queremos fazer algumas coisas relacionadas ao contador quando o componente estiver montado, então podemos adicionar isso aqui. Então, podemos colar em outra palestra. Vou mudar o texto neste log para fazer coisas relacionadas ao contador. Salve isso. Dessa forma, com a API de composição, podemos manter todos os nossos ganchos juntos com o código relacionado, especialmente se usarmos comentários para separar nossas diferentes seções de código. O que costumo fazer nos componentes de exibição é adicionar um comentário de bloco como este. Vou apenas adicionar um comentário para nossas entradas. Então mova isso para cima. Recuo. E, em seguida, muito, um pequeno comentário para o título do nosso aplicativo. Vamos colocar as chamadas de título do aplicativo e o gancho desmontado relacionado a ele abaixo deste comentário. E então muitos comentários de um bloco de toupeiras para o conselho. Vou colocar todo o código relacionado ao nosso conselho embaixo deste comentário. E vou salvar isso. Mesmo que esse componente não seja especialmente complicado, já estamos começando a ver o benefício que a API de composição nos dá em termos de manter nossa lógica relacionada completamente, em vez de espalhada entre as várias opções, o que temos que fazer quando estávamos usando a API de opções. 26. Diretivas personalizadas locais [Módulo 7]: O Vue.js é seguido. Diretivas fora da caixa, como modelo V, V show, v-if, etc. Mas podemos criar nossas próprias diretivas personalizadas para adicionar funcionalidade aos elementos, de modo que possamos fazer algo a um elemento quando ele estiver foi criado ou montado. Exemplo clássico é criar uma diretiva cujo foco automático seja um campo de entrada. Então, vamos criar um salvamento direto que também foca essa importação em nossa visão inicial. Vou pular para a visualização inicial nas visualizações de código-fonte e na visualização de pontos da vista inicial. E vamos nos lembrar como fazemos isso. A maneira da API de opções. Vou descomentar o código da API de opções. A API de opções. Tivemos que adicionar uma opção de diretivas, que é um objeto. Poderíamos colocar todas as nossas diretivas aqui. Vamos criar uma diretiva de foco automático. Então poderíamos chamar isso de foco automático. E, novamente, definimos isso para um objeto. Aqui, podemos adicionar quaisquer ganchos que quisermos , como criados ou montados. Então, vamos adicionar um gancho montado. Podemos ter acesso ao elemento passando este parâmetro l. E então podemos fazer algo com esse elemento. Nesse caso, queremos focá-lo para que possamos fazer foco de ponto L. Vou salvar isso. Devemos agora poder utilizar esta directiva com base nos nossos contributos. E nós só precisamos nos preparar e qualquer nome que usamos aqui com v dash. Se eu pular para a entrada que está aqui, devemos ser capazes de apenas adicionar v dash, também focar. Isso ainda deve funcionar, mesmo que estejamos usando a API de opções aqui. Se eu recarregar a página agora, você pode ver que ela também está focada nessa entrada com a API de opções. Todas as nossas diretivas locais tinham que ser colocadas dentro desses objetos de diretivas, que novamente, como eu continuo dizendo com a API de opções, isso geralmente leva a que o código relacionado seja espalhado por muitas linhas de código. Enquanto que com a API de composição, podemos criar uma diretiva local em qualquer lugar dentro de uma função de configuração. Vamos comentar o código da API de opções e fazer isso da maneira da API de composição. Vou apenas comentar esta seção de script em Júpiter para nossa seção de scripts de API de composição. No botão, vou adicionar outro desses comentários de bloco chamados diretivas. Para criar uma diretiva, precisamos criar um const. O nome disso causado precisa ser camelúsculo e ele precisa começar com uma minúscula v. Podemos chamar isso de V também de foco. Qualquer nome que usamos aqui determinará o atributo que realmente usamos, embora ele seja convertido em um caso de traço como este. V autofoco, CamelCase se torna autofoco v dash quando o usamos no modelo. De qualquer forma, queremos definir isso para um objeto. Aqui, podemos adicionar um gancho de ciclo de vida, como criado. E definimos isso como uma propriedade que é definida como um método como este. Podemos então fazer algo com o elemento ao qual adicionamos esta diretiva neste falcão criado. E também podemos usar todos os outros livros também, como antes montados e montados antes da atualização. Atualizado antes na montagem. Montado. Mas para isso, vamos usar o gancho montado novamente. Podemos apenas usar o mesmo código que fizemos antes para focar o foco simples de ponto l. Já adicionamos essa diretiva ao simples. Espero que isso esteja funcionando agora, eu vou recarregar a página e ainda assim ela ainda está focando automaticamente essa entrada. Mas agora temos a liberdade de colocar essa diretiva local em qualquer lugar que quisermos dentro da nossa seção de scripts. 27. Diretivas personalizadas globais: Neste momento, só podemos usar esta diretiva de foco automático V neste componente específico, vista de ponto de vista inicial. Se quisermos ser capazes de usar essa diretiva em toda a Sarah em diferentes componentes, podemos pegar nossa diretiva, colocá-la em seu próprio arquivo e criar uma diretiva personalizada global. Então, vamos para o Explorador de Arquivos e criaremos uma pasta onde podemos colocar nossas diretivas personalizadas. Então, vou criar uma nova pasta dentro da pasta de origem chamada diretivas. Vou criar um novo arquivo. E vamos obter esse arquivo com o mesmo nome da nossa diretiva. Então V autofoco ponto js. E, a propósito, se você tiver problemas com o espaçamento de abas aqui, porque todos esses arquivos neste projeto que criamos espaço de habitat de dois espaços. Você pode achar que quando você cria um novo arquivo está definido como quatro espaços porque esse é o padrão no código VS. Se você quiser corrigir isso, basta acessar o código, preferências e configurações. Basta alterar essa configuração de tamanho de toque para dois. E talvez seja necessário apenas excluir esse arquivo e recriá-lo também, este arquivo de foco automático V. Mas, de qualquer forma, vamos mover nossa diretiva para esse arquivo. Vou voltar para a vista de pontos da vista inicial. Agora podemos simplesmente cortar esse código. Também excluirei o comentário. Podemos pular para o JS de foco automático e colar isso. E tudo o que precisamos fazer para disponibilizar isso para outros arquivos é exportar essa constante. Assim, podemos começar a exportar e salvar isso. Agora, se saltarmos de volta para a visão de pontos de vista inteira, agora podemos importar esta diretiva e usá-la. Vou apenas pular para a seção de impulso. Para importar esta diretiva. Podemos apenas importar o foco automático de diretivas de barra slash v autofocus. Já temos uma directiva acrescida a este impulso, pelo que espero que isso esteja a funcionar. Vou recarregar a página no entanto ainda está funcionando, exceto que agora é uma diretiva global que podemos usar em qualquer lugar. Apenas para demonstrar que vamos adicionar uma área de texto à nossa página sobre. Então, vamos abrir as visualizações Sobre a origem da página sobre bu.edu, muita área de texto. Depois desse título. Em seguida, precisamos adicionar a seção de configuração de script, muitos comentários para importações. Depois disso, vou apenas copiar o código de importação da própria visualização de pontos , colá-lo lá, e agora devemos poder usá-lo aqui também. Então, vamos adicioná-lo a esta área de texto v foco automático. Salve essa recarga. E, no entanto, está funcionando aqui também. Agora temos uma diretiva global prática que podemos usar em qualquer lugar em nosso aplicativo. 28. Vue Router - US$ Router - Parte 1 [Módulo 8]: Vamos ver como fazemos as coisas de forma diferente com Vue Router na API de composição. Agora você pode se lembrar dos objetos de rotas em dólar que poderíamos usar para acessar coisas como o caminho de rota atual ou parâmetros de rota na API Opções. Bem, ainda podemos usar esses objetos raiz em dólar em nosso modelo quando estamos usando a API de composição. Para demonstrar isso, vamos criar uma página de detalhes de postagem que aceita um parâmetro de ID. E, em seguida, usaremos o objeto raiz do dólar para exibir esse ID na página de detalhes da postagem. Mas antes de fazermos isso, vamos alterar esta página Sobre para uma página de postagens, à qual posteriormente adicionaremos uma lista de postagens. Queremos pular para o nosso arquivo de roteador no roteador de origem index.js. E, a propósito, vou mostrar-lhe como configurar o roteador de visualização do zero mais tarde no curso quando criarmos nossas bolas de notas para cima. Mas neste projeto tudo foi configurado para nós. Não nos preocupamos, vou mostrar-lhe como configurar todas essas coisas do zero. Você pode entender o que está acontecendo aqui um pouco melhor se você ainda não estiver familiarizado com o Vue Router. Mas, de qualquer forma, vamos ajustar esta página Sobre e torná-la uma página de postagens. Então, vou mudar o caminho para postagens de barra. Vou mudar o nome para posts e vou me livrar desse monte de comentários. importaremos um componente chamado Em vez disso, importaremos um componente chamado Exibição de Posts. Vou salvar isso. Isso quebrará nosso aplicativo porque ele está procurando esse componente que não existe. Então, vamos abrir nosso explorador, entrar em visualizações e renomearemos isso sobre Vue dot view para postagens view dot view agora está funcionando novamente. E agora vamos atualizar nossos links de navegação no topo. Estes estão em app.vue, source app.vue. Queremos alterar este segundo link do roteador para ir para as postagens de barra de caminho. E queremos alterar o texto para postagens também. Salve isso, agora devemos ser capazes de discutir a página de postagens. Então, vamos ajustar essa página de postagens um pouco. exibições de origem e as publicações da vista superior mudarão essa classe nesta div raiz, duas postagens, e alteraremos o texto neste cabeçalho, duas postagens também. Salve isso em um pouco. Vamos adicionar uma lista de links para algumas postagens. Bem, em primeiro lugar, vamos configurar uma rota para nossa página de detalhes de postagens. Então, vamos voltar para index.js na pasta do roteador. E vou adicionar uma vírgula após essa rota de postagens e depois duplicar isso. E definiremos o caminho para postar detalhes. E queremos essa rota e queremos que essa rota aceite um parâmetro chamado ID. Então, para fazer isso, podemos adicionar ID de dois pontos de barra no final. Isso significa que se formos para as postagens de barra detalhada ID 1, então o valor do parâmetro ID que estamos passando para essa rota será ID1. E, em seguida, alteraremos o nome para detalhes da publicação e alteraremos o componente para a detalhes da publicação, vista superior. E salvaremos isso novamente, isso quebrará nosso aplicativo porque esse componente não existe. Então, vamos duplicar o componente de visualização desta postagem clicando com o botão direito do mouse e usando o comando de arquivo ou diretório duplicado, que vem da extensão de ação duplicada que instalamos anteriormente em o curso. Vamos duplicar isso e chamaremos de exibição de detalhes do post. Vou remover tudo dentro das tags de script removidas. Área de texto. Vou mudar essa classe para detalhes do pós-doc. Altere o texto no cabeçalho para a página de publicação, salve isso, recarregue a página e isso não está funcionando. E isso porque eu renomeio esse componente incorretamente. Ele deve ser publicado na vista detalhada do ponto de vista. Vamos renomear isso novamente, apenas pensei na visão de mundo no final. Vamos adicionar alguns links para esta página de postagens para que possamos acessar nossa página de detalhes da postagem e, em seguida, você usar as rotas do dólar. Objeto para acessar nosso parâmetro de rota. 29. US$ Router - Parte 2: Vamos adicionar alguns links à nossa página de detalhes da postagem. Nesta página de postagens, vou pular para visualizações na visualização de postagens, visualização de pontos. E depois desta, vou adicionar uma lista não ordenada. Dentro disso, vou adicionar uma tag LI. E então, dentro disso, vou adicionar um link de roteador ao link do roteador. Podemos usar uma caixa de traço como esta, ou podemos usar o estojo Pascal. E vou usar o caso Pascal. Dentro da saída, o texto publica uma resposta, defina o caminho para esse link do roteador. Podemos simplesmente adicionar um atributo dois e defini-lo em nosso caminho. E se voltarmos para o nosso roteador de origem de arquivo de roteador index.js, o caminho que especificamos aqui foi barra, postar barra detalhada e, em seguida, o ID. Então, vou definir isso como atributo para barra de detalhe da barra id um. E então eu vou duplicar essa LI duas vezes, mudei o valor dos dois no segundo link para id2 no final e, em seguida, postar dois, e depois o terceiro, vou mudá-lo para três e depois postar três. Vamos salvar isso e podemos ver um link para essas postagens. Vamos começar um pouco de margem na parte inferior. Muito. Uma seção de estilo que tem escopo, o que significa que qualquer estilo que colocamos aqui, só se aplicará a esse componente específico. Então, vou adicionar um pouco de margem inferior à UL, margem, 30 pixels inferiores. Salve isso. Vamos ver se esses links estão funcionando. E, no entanto, estamos em nossa página de postagens ou página de detalhes da publicação. Podemos ver slash id um na barra de endereços. E se voltarmos e clicarmos no segundo, deixe-me dizer slash id2 no final, agora podemos usar os objetos de rotas de dólar em nosso modelo para obter acesso a esse parâmetro de ID que estamos passando. Vamos abrir a página de detalhes da postagem, exibição de detalhes das postagens, a visualização de pontos. Deixa sair um parágrafo abaixo desse cabeçalho. E vou apenas fazer com que o texto exiba o conteúdo das postagens com ID do esmalte, adicione chaves duplas, raiz de dólar, pontos params e, em seguida, o nome do nosso parâmetro, que é ID do ponto de identificação aqui. Vamos salvar isso. E podemos dizer que exiba o conteúdo das postagens com um ID de id2 aqui. Se voltarmos e clicarmos no terceiro post, veremos ID3. E vamos sair rapidamente do botão Voltar aqui, vou adicionar outro parágrafo em um link de roteador com os textos de volta, apenas para adicionar uma pequena seta para a esquerda aqui, vamos usar uma entidade HTML, LT, que soa por menos de e depois ponto e vírgula. E, em seguida, definiremos os dois valores neste link do roteador para postagens de barra. Salvar esse botão Voltar não está funcionando. Você pode ver que o acesso aos objetos de rotas de dólar em nosso modelo é exatamente o mesmo na API de composição como na API de opções. Mas como podemos acessar informações de nossa rota em nossa seção de scripts? Bem, na API Opções, poderíamos apenas fazer esse acesso root dot dollar, todas as mesmas informações. Poderíamos usar esses métodos internos as propriedades calculadas são ganchos do ciclo ou na API de composição, não temos acesso a isso. Não temos acesso para visualizar a instância em todas as opções porque não temos nenhuma opção. Na API de composição, precisamos usar view threes, usar route composable em vez disso. 30. Use Rota: Não podemos usar essa raiz de dólar de pontos na API de composição. Se eu salvar isso, veremos um erro e nossos surtos. Então, vamos remover isso. Faça isso da maneira da API de composição. Vamos adicionar um botão a esta página que aciona um método quando clicamos nele. Então, após essa tag de parágrafo entre esses dois parágrafos, vamos adicionar uma div. Dentro disso. Vou adicionar um botão com o texto mostrar o ID da postagem. Quando clicamos nisso, queremos mostrar um LIT que exibe o ID da postagem. Vamos adicionar um manipulador de cliques a isso. Então, vou clicar em Mostrar postado. Vamos criar muito esse método. Este método como um const, const, show posts I é igual a um método. Por enquanto, vamos fazer logout show post ID para garantir que isso esteja funcionando. Salve esse clique no botão e podemos dizer mostrar o ID do post no console. Então, agora, neste método, queremos mostrar um alerta que exibe o ID da postagem. E novamente, não podemos fazer essa raiz de dólar. Portanto, precisamos importar visualizações novo use route composable. Então, precisamos importar isso primeiro. Portanto, importe a rota de uso do roteador de visualização. Observe que estamos relatando isso do Vue Router e não do modo de exibição. Para obter acesso a esse composable, precisamos atribuí-lo a uma variável ou constante no View Team recomenda usar a rota de nome. Portanto, muitos conceitos chamados de colono de rotas iguais aos parênteses de rotas dos EUA. Agora podemos acessar esse composable usando essa constante de rota. E, a propósito, vou entrar no composable é mais detalhado mais adiante no curso, incluindo como criar um composable personalizado e como importar composable de bibliotecas de terceiros , como view usar. Mas de qualquer forma, agora podemos usar essa constante de rota assim como usaríamos esse dólar de pontos. Dentro desse método, vamos mostrar um alerta. Usarei backticks para gerar uma string de modelo aqui, e vamos apenas exibir o ID deste post é Colab. Em seguida, permita chaves de dólar e encaracolado para que possamos produzir algo aqui e queremos exibir nosso parâmetro de rota ID. Então, em vez deste ponto root dot dot params dot ID, agora podemos simplesmente fazer pontos de pontos de rota ID de ponto. Vamos salvar isso e ver se isso está funcionando. Clique no botão. Vemos o alerta. A ideia desse post é ID3, e isso está funcionando. Vamos experimentá-lo em uma postagem diferente, postar para clicar no botão. A ideia deste post é id2. 31. Use Router: Na API de opções, poderíamos lidar com o roteador programaticamente usando este roteador de dólar de ponto. Por exemplo, se quiséssemos enviar o usuário para a página inicial, poderíamos fazer esse push de ponto do roteador e, em seguida, a barra de caminho. E isso os levaria de volta para a página inicial. Mas, novamente, na API de composição, não temos acesso a isso. Então, precisamos usar o roteador dos EUA composable a partir do Vue Router. Vamos nos livrar dessa linha. Importará usar o roteador do view router. E, novamente, precisamos atribuir isso a uma constante que normalmente chamamos de roteador. Então, vou duplicar essa constante aqui, alterá-la para roteador e alterá-la para usar parênteses do roteador. Agora vamos adicionar outro botão à nossa página após essa div com o primeiro botão. Vamos adicionar outra div. E, em seguida, outro botão com o texto vai para casa. Em três segundos. Vamos adicionar um manipulador de cliques a esse botão. Clique em ir para casa em três segundos. E agora vamos criar esse método após esse método. Então, const, vá para casa em três segundos é igual a uma função de setTimeout no código VS. Se você acabou de digitar o conjunto, poderá escolher este snippet de função setTimeout, o que permitiu que os estrangeiros. Vou me livrar do ponto e vírgula e definiremos o tempo limite para 3 mil milissegundos três segundos. Após esse tempo limite de 3 segundos, queremos enviar o usuário para a página inicial. E então, em vez de fazer esse push de ponto do roteador de dólar, barra de parênteses, agora podemos simplesmente fazer barra de push de ponto do roteador. Agora vamos salvar isso. Clique no botão e aguarde três segundos. Voltei à página inicial. Se quisermos empurrar o usuário com base no nome da rota em vez desse caminho explícito por nome, quero dizer o sem nome especificado aqui em cada uma de nossas rotas em index.js na pasta do roteador, então podemos fazer isso também. Podemos simplesmente mudar isso para push de pontos do roteador e, em seguida, um objeto e seu nome. E então o nome da rota para a qual queremos ir, que é minúscula em casa. Salve isso e veja se isso funciona. Clique no botão. Aguarde três segundos. Sim, isso também funciona. Ou se quisermos enviar o usuário para uma página de detalhes de post específica com um ID específico, também podemos fazer isso. Então vou voltar para a página de detalhes do post, um pequeno botão. Vou apenas duplicar essa div e botão. E digamos que queremos enviar o usuário para a primeira postagem. A postagem com um ID de ID um. Vou alterar o texto dentro deste botão para ir para o primeiro post, alterei o nome do método para ir para as primeiras postagens. Vamos criar esse método. Vou apenas duplicar este. Altere o nome para ir para a primeira postagem, remova o código dentro desse método para enviar o usuário para a página de detalhes da postagem para as postagens com um ID de um, podemos simplesmente fazer push de ponto do roteador e, em seguida, um objeto, defina o nome para postar detalhes. E, em seguida, podemos adicionar um objeto params e definir o ID para salvá-lo. Atualmente, estou na página de detalhes da postagem das postagens com um ID de três. Então, vamos clicar nisso, vá para o botão da primeira publicação e agora estamos na página de detalhes da postagem para as postagens com um ID de um. 32. Listas (v-for) [Módulo 9]: As listas que usam a diretiva V4 funcionam exatamente da mesma maneira na API de composição como antes. Mas apenas para demonstrar isso rapidamente, vamos produzir essa lista de postagens dinamicamente usando uma ira de dados e AV para direcionados. Então, vamos pular para nossa página de postagens. Portanto, visualizações de origem, exibição de postagens, visualização de pontos. E vamos configurar um href onde podemos colocar uma variedade de postagens. Então, vou adicionar um novo comentário aqui, que apenas diz, vamos configurar uma constante chamada posts, definirá isso igual a um href. Precisamos importar o método ref da exibição. Vou colocar isso no topo aqui. Importar da exibição colocará uma matriz dentro desta href. E cada item na matriz será um objeto com algumas propriedades. Então, adicionaremos uma propriedade ID e definiremos esta primeira para adicionar uma propriedade title e defini-la para postar uma. E então muita vírgula após esse objeto, duplique isso duas vezes. Apenas alterou os IDs para dois no título para postar dois para o segundo I M. E, em seguida, para o terceiro item, definirei o ID como ID3, definirei o título para postar três e salvá-lo. Este array de postagens agora está disponível em nosso modelo. Então, vamos usá-lo para cuspir esses aliados com nossos links de roteador dinamicamente usando a diretiva queda V, vou me livrar de todos os Aliados e as rotas estão vinculadas. Então, além do primeiro, salve isso, vamos adicionar uma diretiva VFR a esta LI. Então, v4 postando postagens. Isso vai percorrer nossa matriz de posts ref. À medida que está percorrendo, cada objeto estará disponível no espaço reservado que estava especificando aqui, post. E também precisamos adicionar uma propriedade chave, dois pontos k é igual. E queremos definir isso para algo que será único. Então vamos definir isso para pós-doc arrumado. Salve isso. E agora podemos ver três postagens sendo cuspidas. Então, vamos mostrar o título da postagem aqui, que será um título de pós-doc. E então vamos atualizar o link e os dois prop também. Então, vou usar uma string de modelo adicionando alguns ticks de volta em torno disso, livrar-me do ID1 e cuspir isso dinamicamente adicionando chaves de dólar. Também precisamos adicionar dois pontos ao início deste suporte. E, em seguida, dentro das chaves, emitirá o ID que está no pós-doc arrumado. Salve isso, recarregue. Se clicarmos em Roma do pós-guerra, o ID de uma página, grátis, clique em Publicar para executar o ID de duas páginas. Você pode dizer que não há absolutamente nenhuma diferença quando se trata de listas sob a diretiva VFR na API de composição. 33. Refs de modelo: Vamos falar sobre modelos refs. Agora, não me refs de dados que estamos usando para alguns de nossos dados reativos. Quero dizer, como na API Opções poderíamos adicionar um atributo href a um elemento, dar um nome a ele. E então poderíamos acessar esse elemento no componente é montado e, em seguida, fazer algo para que ele tenha focado ou fora de classe ou descobrir a largura dos elementos ou algo parecido. Vou apenas remover isso. Agora, digamos que queremos acessar esse elemento de cabeçalho é H2. Queremos descobrir a largura desse elemento. Podemos precisar da largura desse elemento para fins de design responsivo ou algo parecido. Por exemplo, talvez precisemos alterar o tamanho do texto, também fino se o elemento for muito largo ou não largo o suficiente. Na API de composição, ainda somos o atributo href para o elemento que queremos direcionar. E você pode usar qualquer nome que quiser. Mas o padrão aceito é usar CamelCase com a palavra ref no final. Podemos configurar isso, ref de título, salvar. Como podemos acessar esse elemento quando esse componente é carregado? Vamos rolar para baixo até o título do nosso aplicativo aqui. Agora, na API de opções, poderíamos apenas fazer esse ponto dólar refs, pontuar um título ref. E poderíamos acessar o elemento e depois fazer algo com ele, descobrir sua largura ou o que quer que seja. No entanto, na API de composição, não temos acesso a esse ponto dólar Fs, então isso não funcionará. O que precisamos fazer é configurar um const com o mesmo nome que nosso ref, title ref. Então o título const href é igual. E então precisamos definir isso para um pouco confusamente, um href de dados. Definimos isso para um método ref e definimos o valor inicial para saber. E, novamente, precisaremos importar esse método ref da exibição. Então, vamos adicioná-lo à nossa importação aqui, vírgula aproximada, e agora podemos acessar esse elemento por esse href. valor desse componente de saída constante é montado nesta montanha, pegou o que podemos fazer é fora, então ref, valor de ponto, ainda precisamos usar o valor de ponto para refs de modelo. Isso deve nos dar acesso a esse elemento h2. Vamos bloquear isso por enquanto. pontos do console. Salve isso. E poderíamos dizer que o cabeçalho está bloqueado no console. Se quiséssemos obter a largura desse elemento, poderíamos começar a largura do deslocamento de pontos até o final disso. Só vou fazer logout uma string de modelo com o texto. O título é chaves onduladas em dólar, e então eu vou colar nesse código novamente lá fora. Então, valor de ponto ref, largura de deslocamento de pontos. E depois disso, vou apenas adicionar pixels largura e salvar essa recarga. E podemos ver aqui que diz que o círculo externo tem 318 pixels largura para um redimensionamento gratuito nossa recarga de AP. E agora diz que o título tem 453 pixels de largura. 34. nextTick: O próximo tick nos permite esperar até que o DOM seja atualizado e, em seguida, faça alguma coisa. Por exemplo, se clicarmos no botão Mais aqui, nosso contador será atualizado, no DOM será atualizado. Nosso próximo tick nos permite esperar até atualização do lock dom seja concluída antes de fazermos outra coisa. Digamos que quando aumentarmos nosso contador, queremos esperar até que a atualização do dom seja concluída. Antes de fazer outra coisa, vou pular para o nosso método de contador aumentado, que está aqui na API de opções. Poderíamos fazer esse ponto dólar próximo tick e, em seguida, passar um retorno de chamada para isso assim, e depois fazer algo depois que o DOM for atualizado. No entanto, isso não funcionará na API de composição. Se eu salvar isso e alterar o contador verá um erro na API de composição. Precisamos importar o próximo método de tick da exibição. Então, vou rolar até a nossa declaração de importação e começar o próximo tick até o final. Em vez deste ponto dólar Alexis, podemos apenas fazer o próximo tick. Em seguida, passe um retorno de chamada para isso. Então podemos fazer algo quando o DOM for atualizado. Então faça algo quando o contador for atualizado no ponto, salve isso. E se mudarmos o contador, podemos ver que estar bloqueado ou como o próximo tick é uma função assíncrona, também podemos usar async aguardar para fazer isso. Para fazer isso, precisamos tornar nosso contador aumentado uma função assíncrona como esta adicionando a palavra-chave assíncrona aqui. Em vez desse método com o retorno de chamada, vou me livrar disso. Agora podemos apenas aguardar. Próximo carrapato. Mente que, se salvarmos isso, aumentar o contador, podemos dizer que isso ainda está funcionando. 35. Teleport - Parte 1: V3 nos traz um novo recurso chamado teletransporte. Agora, isso não é especificamente um recurso da API de composição. Na verdade, podemos usá-lo com a API de composição e a API de opções exatamente da mesma maneira dentro de qualquer visualização três, no entanto, eu queria cobri-lo de qualquer maneira, já que é um recurso tão incrível, nos permite mover um elemento de seu lugar padrão no despejo para outro lugar no cão, geralmente fora da nossa visão como fora desta div com um id de aplicativo, que é a raiz elemento de nossa visão para cima ou teletransportá-lo para outra div, que é uma criança do corpo. Isso é realmente útil para coisas como modais, que podem não ser exibidos corretamente se os exibirmos em algum lugar profundamente aninhado em nossa árvore DOM de aplicativos. Agora, esta página inicial é bastante complicada agora, assim como a página de postagens também. Então, vamos criar uma nova página onde podemos brincar com o teletransporte. Então, vou criar uma nova visualização em código-fonte e visualizações chamadas modais view top view, template tag dentro de muita div com uma classe de modais. E então vou começar uma tag H1 com os modais de texto. Em Salvar, precisamos configurar uma nova rota para isso. Então, queremos ir para a fonte e o roteador index.js. Vamos apenas duplicar essa rota de postagens. Em seguida, alterarei o caminho para modais de barra, alterarei o nome para modais, alterarei o caminho para o componente para a visualização de modais, vista superior. E vamos salvar isso e para que possamos chegar facilmente a esta página. Vamos adicionar um link à nossa navegação, que está no source app.vue. E vamos adicionar um novo link de roteador após esse link inicial. Então, vou duplicar isso. Defina o caminho para modais de barra, defina o texto para modais também. Salve isso. E vamos ver se podemos chegar lá. E, no entanto, estamos agora nessa página de modais. Então, vamos pular para a visualização de pontos da visualização dos modais. Vamos criar um botão que, quando clicarmos, mostrará um modal. Então, após esse cabeçalho, muitos botões com o texto mostram modal. Salve isso. E vamos adicionar alguma marcação para um modal com algum texto em um botão encerrando-o. Então, muita div com uma classe de modal dentro disso, muito cabeçalho H1 com o texto, isso é modal. E, em seguida, muitos parágrafos com algum Lorem Ipsum no VS Code, podemos produzir alguns Lorem Ipsum apenas digitando lorem e apertando Enter nesta abreviação Emmet. E eu sou muito botão embaixo para esconder o modal. E vou colocar o texto Ocultar modal e salvá-lo. E vamos adicionar alguns estilos para dar a isso uma cor de fundo e algum preenchimento. Então, muita tag de estilo. Segmente a classe modal. Defina o plano de fundo como bege, defina o preenchimento para dez pixels. Agora vamos começar a pagar o aluguel para determinar se esse modelo é mostrado ou não. Muitas das nossas tags de configuração de script, muitos comentários, que apenas dizem modais, muita constante chamada show modal e definem isso igual a uma ref com um valor inicial de false. Então, se isso for falso, então não mostraremos o modal. E se for verdade, mostraremos o modal e precisamos importar ref de view. Vou adicionar outro comentário aqui, que diz apenas as entradas. Em seguida, importaremos da exibição. E isso permitirá que a diretiva v-if para esta div com a classe de modal. Vou dividir os atributos com a extensão de atributos HTML divididos na qual instalamos anteriormente. V-if show modal, salve isso e podemos ver o modal desaparecer. E se mudarmos esse valor para verdadeiro, deixe-me vê-lo aparecer novamente. Vamos colocá-lo de volta para falso. Vamos alterar o valor disso sem botões. Neste botão show modal, adicionaremos um manipulador de cliques, que define show modal como true. E isso está funcionando. E então, neste botão modal alto, adicionaremos outro manipulador de cliques, que define show modal como false, salve isso, veja se está funcionando e está funcionando. Agora podemos mostrar e ocultar esse modal. 36. Teleport - Parte 2: Agora vamos adicionar alguns estilos a este modelo para torná-lo absolutamente posicionado em tela cheia. Então vou cair para a seção de estilo, definir a posição como absoluta, definir a esquerda para 0, a parte superior para 0, definir a largura para 100% e a altura para 100%. Salve isso. Você pode dizer que isso não funcionou. Vou esticar isso um pouco. Agora, a razão pela qual ele não funcionou é porque esse elemento modal porque esse elemento modal tem um elemento ancestral que tem sua posição definida como relativa. Abrimos o despejo e escolhemos nosso elemento raiz, esta div com um id de aplicativo. Veja os estilos que podemos ver que isso tem uma posição relativa. Essa é exatamente a razão pela qual muitas vezes precisamos usar o componente de teletransporte. E você verá se arrastamos essa div para ser um filho direto do corpo, então o modal é de tela cheia, embora não pareça certo porque acho que precisamos adicionar um índice Z para garantir ele fica em cima de tudo. Então, vou saltar de volta ao estilo e nosso índice desejado de um. Salve isso, recarregue a página, mostre o modal e eu arrastarei isso para a raiz da nossa página. Quando criança do corpo. Ele diz que agora parece como queremos. Agora podemos usar o componente de teletransporte para teletransportar essa div com a classe de modal para aumentar a árvore DOM, como fizemos aqui nas ferramentas de desenvolvimento. Para fazer isso, tudo o que precisamos fazer, vou recarregar que é cercar o elemento que queremos teletransportar, que é essa div. Em um componente de teletransporte. Vou apenas selecionar a div e movê-la para o teletransporte. E, em seguida, adicionamos um atributo to que definimos para um seletor CSS para determinar onde queremos diferenciar esse elemento dois. Se quisermos apenas fazer disso um filho direto do corpo, então podemos simplesmente definir isso para o corpo. Vou salvar isso. E se recarregarmos, eu escrevi que errado lá que deveria ser teletransporte, diga isso novamente e recarregue. E você verá se mostramos o modal agora, agora parece como queremos, porque o componente de teletransporte o teletransportou para ser um filho direto do corpo. Ou se não quisermos diferenciar isso para o corpo e queremos enviá-lo para uma div particular, e também podemos fazer isso. Vamos apenas pular para nossa página HTML na raiz do nosso projeto, index.html. Muito div depois desta div com um ID de aplicativo, que é onde nossa visão acima está morando lá para a classe de modais dash container. Salve isso. E agora, se saltarmos de volta para a visualização de pontos de visualização dos modais, podemos pular para este componente de teletransporte e apenas mudar o contêiner de dois modais de ponto e salvar essa recarga. Mostre o modal. Ele está movendo o modal para o contêiner de modais div que acabamos de começar. No entanto, não parece certo porque todos os elementos neste aplicativo estão recebendo uma posição relativa por causa desse estilo de asterisco aqui, talvez precisemos apenas substituir esse estilo para este modais container div. Poderíamos fazer isso em nosso CSS base. Se formos para ativos de origem e CSS base, podemos simplesmente pular para baixo. O alvo são modais, contêiner. Recipiente. Defina a posição como inicial. Salve isso. Agora parece tudo bem. 37. Componentes de criança [Módulo 10]: Vamos rever um componente filho neste módulo. Uma vez que muita coisa mudou em relação aos componentes filhos quando usamos a API de composição, especialmente a forma como lidamos com props emite o novo valor do modelo e atualiza os componentes dinâmicos do padrão de valor modal fornecer injetar. Vamos começar transformando esse modal em um componente filho. Vou criar um novo arquivo na pasta de componentes de origem. Por algum motivo, não tenho essa pasta, então vou apenas criar componentes. Lá dentro. Vou criar um novo arquivo chamado vista de ponto modal. Muito as tags de modelo salvam isso. E agora vamos pular para nossa visualização de modais nas exibições de código-fonte e na visualização de pontos dos modais. Vamos cortar nosso código modal incluindo o componente de teletransporte, e depois colá-lo em nosso modelo na visualização de pontos modais. Por enquanto, vou remover a diretiva v-if. Este manipulador de cliques no botão modal alto, já que não temos esses dados aqui. Também vou colocar os estilos dos modais bu.edu. Vou colocar toda a tag de estilo, colar isso no ponto modal Vue. Salve isso. Agora vamos importar esse model.py dois componentes para a visualização de pontos de visualização modais. Vamos nos lembrar como fizemos isso com a API de opções. Permitido mais algumas tags de script são o padrão de exportação. Na API de opções, primeiro tivemos que importar nosso modal de entrada de componente da exibição de pontos modais de barra de componentes de barra. E então, em nossa exportação padrão, tivemos que adicionar componentes, objetos destacam-se componente lá dentro. Em seguida, poderemos usar esse componente em nosso modelo. Isso ainda deve funcionar porque lembre-se, podemos combinar a API de opções com a API de composição. Embora eu não recomendo isso se colocarmos esse componente no modal de página e colocarmos esse bucket v-if. Então VF mostra modal. Salve isso. Clique no botão. Podemos ver nosso modal na API Opções, esses objetos de componentes sempre foram um pouco dolorosos no livro porque toda vez que adicionamos um novo componente filho ou renomeamos um componente, sempre temos que manter isso componentes objetos atualizados ou na API de composição. Não precisamos nos preocupar com isso. Tudo o que precisamos fazer é importar nosso componente e podemos usá-lo. Vou apenas comentar esse código. Vamos fazer isso da maneira da API de composição. E tudo o que precisamos fazer é apenas importar esse componente. Vou apenas copiar esta declaração de importação, vou colá-la aqui, e isso é tudo o que precisamos fazer. Então, vou salvar essa recarga. Agora podemos ver que nosso modal e alto modal embutido não está funcionando, mas não se preocupe, vamos consertar isso mais tarde. 38. Fix vistas preguiçosas: Antes de seguirmos em frente, notei que há um pequeno atraso. Na primeira vez que carregamos a página de modais na página de postagens, nem sempre a vejo, mas às vezes faço. É um pouco irritante. Então, vou consertar isso. Vou pular para a fonte e o roteador index.js. E a razão pela qual isso está acontecendo é porque estamos carregando esses componentes com preguiça. Em outras palavras, quando carregamos um componente como este em vez de um portão importante de antemão, estou apenas adicionando-o assim. Em seguida, o componente só é carregado na memória no ponto em que visitamos essa rota, o que resulta em um atraso muito pequeno quando carregamos esses componentes pela primeira vez. Para corrigir isso, podemos importar explicitamente todos esses componentes de antemão, assim como fizemos com a visualização de pontos da vista inicial. Então, vou duplicar essa linha e colocar em vista três vezes. E então farei uma seleção múltipla na visualização inicial. Eu substituo isso pela visualização de modais. E, no próximo, farei uma seleção múltipla e a substituirei por postagens. Para o último, substituirei isso de detalhes das postagens. Então vou fazer uma seleção múltipla nesses três nomes mantendo pressionada a tecla Alt. E então vou fazer várias seleções aqui em cada um desses métodos que são preguiçosos carregando esses componentes, basta colar nesses nomes de componentes. Vou salvar isso. Agora não devemos ver mais nenhum atraso e todas as nossas páginas devem carregar de forma agradável e rápida. Mesmo a primeira vez que os atingimos. 39. Slots: Na maior parte, os slops, funcionam exatamente da mesma maneira na API de composição. Apenas para demonstrar que, se saltarmos para a visualização de pontos modais, em vez de codificar esse conteúdo neste componente w modal. Vamos passar isso para baixo da visualização de pontos dos modelos do componente pai usando um slot. Então, vou pular para a visualização de pontos modais. Corte este parágrafo e, em vez disso, basta colocar um slot aqui e salvá-lo. E então, em modais, o ponto Vue colará o parágrafo aqui que eu cozinhei antes. Vamos salvar essa jukebox que são modais na página clique no botão. E, no entanto, esse conteúdo está passando pelo uso nosso slot e também os slots nomeados funcionam da mesma maneira também. Vou pular para a visão modal. E digamos que queremos passar o título modal para baixo usando um slot nomeado. Vou apenas remover esse texto e adicionar outro slot aqui. Daremos a este um nome de título. Salve isso. Agora devemos ser capazes de passar esse título para baixo usando um slot nomeado. Então, para fazer isso, podemos apenas adicionar uma tag de modelo aqui digitando o conceito que queremos enviar usando este slot, então meu novo título e, em seguida, para nossa tag de modelo de abertura, precisamos adicionar slot v dash, dois pontos e, em seguida, o nome da lei dos EUA, e nós a chamamos de título. Título. Vamos ver se isso está funcionando. Sim, podemos ver meu novo título lá. E também podemos abreviar este bit de dois pontos do slot v dash usando um símbolo de hash em vez disso. Então vou dizer que veja se isso ainda está funcionando. Eu ainda trabalho em. Você pode ver que tudo isso funciona exatamente da mesma maneira que antes com a API de opções, a única coisa que funciona de forma diferente é como acessamos programaticamente nossos dados de slots. Agora, se quisermos acessar nossos dados de slots no modelo, ainda podemos fazer isso da mesma forma que antes. Então, depois deste slot aqui, vou adicionar uma pré-etiqueta. Ainda podemos acessar nossos dados de slots usando a palavra-chave slots de dólar, assim como poderíamos na API de opções. Então, se eu quiser soltar os dados relacionados ao slot de título, posso apenas fazer títulos de pontos de slots de dólar e, em seguida, parênteses. Salve isso. E podemos ver todos os dados relacionados ao nosso slot sendo cuspido. No entanto, se quisermos acessar esses dados programaticamente em nossa seção de script, o que provavelmente é algo que você raramente precisará fazer. Embora eu tenha achado o que eu precisava fazer isso uma vez no meu orçamento, estou trabalhando neles. Precisamos fazer isso um pouco diferente na API de composição. Então, muitas das nossas tags de configuração de script. Então, na API de opções, se quiséssemos acessar esses dados de slots, poderíamos apenas fazer esse título de ponto de slots de dólar. Na API de composição, precisamos importar nosso composable from view, que é o composable de slops dos EUA. O que podemos fazer em vez disso é importar, usar slots de exibição. E então podemos atribuir esse composable a uma constante. Portanto, os slots const são iguais a usar parênteses de slots e, em seguida, podemos acessar nossos dados de slots usando essa constante de slots. Se quiséssemos obter este título novamente, poderíamos apenas fazer slots dot title, parênteses. E vamos fazer logout disso. Arquivo Console.log. Salve isso, mostre o modal e agora podemos dizer que nossos dados de slots estão sendo cuspidos no console. Novamente, isso não é algo que você vai precisar com muita frequência, mas há alguns casos raros quando você vai precisar. Antes de seguirmos em frente, vamos remover tudo na seção de script aqui. E vamos remover essa pré-etiqueta que adicionamos também. 40. Props: Vejamos como lidamos com adereços usando a API de composição. Agora, a maneira como passamos adereços do componente de vestuário para um componente filho é exatamente a mesma de antes. É apenas a forma como recebemos props no componente filho do componente pai que foi alterado. Então, vamos pular para a visualização de modais, a visualização de pontos. E digamos que queremos passar esse título para baixo usando um prop em vez de usar um slot nomeado. Então, vamos remover esta tag de modelo aqui. Vou dividir os atributos neste modal e, em vez disso, passaremos isso usando um prop, para que possamos adicionar um prop chamado title e depois passar nosso título. Então meus parênteses de título modal via prop. Salve isso. Agora vamos pular para a visualização de pontos modal, e agora precisamos receber essa prop na API de opções. Vou começar outra seção de script, o padrão de exportação. A API de opções. Adicionamos uma opção de adereços. Podemos definir isso para uma matriz ou um objeto. Poderíamos colocar nossos adereços aqui. Poderíamos adicionar um título prop, settler a2, um objeto. E poderíamos definir o tipo como string, porque isso vai ser uma string. Se quisermos, podemos definir um valor padrão caso a prop não tenha sido especificada no componente pai. Assim, poderíamos definir o padrão para saber o título especificado. Salve que isso ainda funcione como lembre-se, podemos combinar a largura da API de opções, a API de composição. Então eu vou me livrar desse slot aqui. E, em vez disso, apenas saída. Olhe chaves encaracoladas e o título. Salve isso. E vamos ver se podemos ver o título em nosso modal. No entanto, podemos ver o título que meu título modal via prop. No entanto, fazemos isso de forma um pouco diferente usando a API de composição. Vamos comentar esta seção de script. Faremos isso da maneira da API de composição. Então, primeiro vou adicionar um desses comentários em bloco, que diz prompts. Para receber nossos props usando a API de composição, precisamos criar uma constante chamada props e definir isso igual a um novo método chamado define prompts. Uma coisa a notar é que, ao contrário da maioria dos métodos V, como Raf e reativo, e computado, etc., na verdade, não precisamos importar esse método de props definido da exibição. Ele está disponível automaticamente. E agora podemos definir nossos adereços da mesma maneira dentro desses parênteses. Podemos transmiti-las como uma matriz como essa. Ou se você quiser obter mais específico e passar o tipo e o padrão, etcetera de nossos props, então podemos passar em um objeto. Em vez disso. Podemos definir nossos adereços da mesma maneira. Vou copiar este título prop que definimos antes. Cole isso aqui e salve isso. E espero que isso esteja funcionando. Agora, vou recarregar a página, mostrar o modal. E, no entanto, podemos ver que o adereço está passando. E vamos apenas garantir que nosso valor padrão esteja passando se não especificarmos o componente pai. Então vou pular para os modais ver ponto Vue. Acabei de remover este título e salvá-lo. E sim, podemos dizer que nenhum título especificado e eu vou desfazer isso e colocá-lo de volta e salvá-lo. Uma coisa a notar é que quando usamos adereços em nosso modelo, podemos usar apenas o nome de carvalho reto do adereço. Temos aqui o título, e também podemos usar o título do ponto de adereços, salvar. Você pode ver que esses dois funcionam. Vou colocar isso de volta para o título. No entanto, se quisermos acessar nosso prop em nossa seção de script, e então precisamos usar essa constante de props. Então, se eu tentar consolar o título do log , veremos um erro. No entanto, se consolarmos o título do ponto dos props do log, poderemos ver o prop sendo bloqueado. Antes de seguirmos em frente, vamos remover esse registro do console e salvá-lo. 41. Emissões: No momento, não podemos fechar esse modal. Então, como podemos obter esse botão quando clicamos nele para fechar esse modal? Bem, este botão está na visualização de pontos modais. E se saltarmos para a visualização de pontos de visualização dos modais do componente pai , temos este show modal ref. Isso está determinando se o modelo é exibido em cima. Então, quando clicamos neste botão no componente filho, precisamos de alguma forma definir esse href modal, que está no componente paralelo, volta para false para ocultar o modal. E uma maneira de fazer isso é emitindo um evento personalizado. Deixe-me clicar neste botão e, em seguida, ouvir esse evento no componente pai, neste componente modal. E então, quando recebemos esse evento, podemos simplesmente definir partes modais de false, aquelas que escondem o modal. Então, vamos pular para a visualização de pontos modais e emitiremos um evento personalizado quando clicarmos neste botão. Agora, na API de opções, vou descomentar esse código. Por um segundo. Tivemos que adicionar uma opção de emissão definida a uma matriz. E tivemos que declarar nossos eventos personalizados aqui, como esconder modal. E não poderíamos personalizar eventos do nosso modelo, mas declaramos nossos limites forma diferente com a API de decomposição. Então, vou comentar isso novamente. O que precisamos fazer, vou começar outro comentário de bloco aqui, que diz que emite. O que precisamos fazer na API de composição para declarar nossos limites é criar uma constante chamada emit. Defina isso igual a um método chamado define. Emite. Um pouco como o método definido. Novamente, provavelmente encontraremos o método props, não precisamos importar esse método da exibição. E então nós apenas passamos uma matriz para aquela onde podemos declarar todos os nossos eventos personalizados. Vamos declarar e emitir chamado Hyde modal. Agora podemos emitir o modal de ocultação de eventos de qualquer lugar em nosso modelo. Agora podemos simplesmente pular para este elemento de botão e adicionar um manipulador de cliques e , em seguida, usar o método de emissão de dólar e, em seguida, apenas omitir esse método personalizado hide modal. Você pode ver que a maneira como usamos emits em nosso modelo é exatamente da mesma maneira que antes. É apenas a maneira como os declaramos em nossa seção de script que é diferente. Se eu salvar isso, agora podemos ouvir esse evento na visualização de modais do componente pai, visualização de pontos. Então, vamos pular para isso. Se saltarmos para esse componente modal, podemos pensar que eu esconderia modal, que é o nome que usamos aqui e aqui. E agora podemos fazer algo quando recebemos esse evento e só queremos definir o show modal de volta para false. Podemos apenas fazer show modal igual a false. Então, vamos salvar isso e ver se está funcionando. Vou recarregar a página, clicar no botão e clicar no botão de altura. Podemos dizer que agora está funcionando. É assim que emitimos um evento diretamente do nosso modelo. Mas e se precisarmos emitir um evento programaticamente da nossa seção de scripts, bem, com a API de opções, podemos apenas fazer esse ponto de emissão de dólar e, em seguida, emitir o evento assim. No entanto, isso não funcionará na API de composição. Em vez disso, precisamos usar essa constante emit. Mas antes de fazermos isso, quando clicamos neste botão, em vez de emitir o evento diretamente do modelo, vamos acionar um método local. Vamos acionar um método chamado handle Wilson click. Em seguida, adicionarei outro comentário de bloco aqui, identifique o clique do botão configura esse método. Vamos apenas ter certeza de que isso está sendo acionado. Quando clicamos no botão. Isso é desencadeante e sal para admitir nosso evento daqui, tudo o que precisamos fazer é emitir e em seguida, o nome do nosso evento personalizado. Então, esconda modal. Vamos salvar isso e isso deve estar funcionando agora. Então vou recarregar, mostrar o Modal onclick. No modal alto, vemos o modal desaparecer. 42. modelValue: Agora, quando clicamos neste modal de ocultação aparafusado, acionamos este método de clique de botão manipulado. E então lá emitimos este evento personalizado oi modal. Em seguida, no componente pai, ouvimos esse evento do cliente e, em seguida, definimos show modal de volta como false. Mas podemos realmente simplificar isso acessando este show modal ref diretamente da visualização de ponto modal do componente filho e alterando-a diretamente de volta para false. Aqueles que removem a necessidade de configurar eventos personalizados e, em seguida, emitindo esses eventos na API de opções, poderíamos fazer algo assim com o modificador de coletor. Mas na API de composição, podemos fazer isso com o modelo V, a nova prop de valor do modelo e os eventos de valor do modelo de atualização. Primeiro de tudo, vamos pular os modais bu.edu. Em vez desta diretiva v-if irá adicionar diretiva de modelo av, e vamos definir isso para este href show modal para que possamos obter este componente filho acesso a este show modal ref, oops, eu digitei no modal V que eu deveria ser modelo V. Vou salvar isso. Agora, se saltarmos para model.fit, podemos ter acesso à propriedade data que está sendo passada com o modelo V usando um novo prop especial chamado valor de modelo. E eu geralmente declarei esse adereço no topo dos meus objetos de gotas. Então, muito disso aqui. Então, acabamos de modelar o volume. Podemos definir o tipo se quisermos. Isso vai ser um booleano porque vou mostrar que o ref modal é um booleano. Então, definiremos o tipo 2 bilhões, definiremos o padrão como false. Vamos salvar isso. Agora vamos usar essa prop de valor modal para determinar se o modal é mostrado. Em vez do v-if que tínhamos antes, o componente pai. Podemos simplesmente pular para esta div com uma classe de modal fora da diretiva v-if e defini-lo para o valor do modelo vf. Em outras palavras, se este show modal ref for false, então ele será transmitido com o modelo como false e depois recebido como valor modal. E assim o valor modal será falso nesta div com uma classe de modal não será mostrada. No entanto, se show modal for trig, isso será passado com garrafa V e, em seguida, pego por este modelo de valor prop, onde ainda será verdade. E então vamos mostrar o modal. Então, vamos salvar isso e ver se está funcionando. Vou clicar no botão, mas podemos ver o modal. Sabemos que isso está passando corretamente. 43. update:modelValue: Para ocultar esse modal, ainda estava acionando esse método de clique no botão do identificador. Quando clicamos no botão, estamos emitindo esse modal alto de eventos costais e estou ouvindo esse evento e, em seguida, definindo show modal de volta para false. Mas podemos realmente manipular o href que estamos passando aqui show modal diretamente usando o novo evento de valor do modelo de atualização. Dessa forma, podemos nos livrar desse evento modal alto e removê-lo desse componente. Então, vamos voltar para a visualização de pontos modais. Em vez de emitir esse evento personalizado, emita um novo evento chamado atualizar volume do modelo de dois pontos que precisamos para passar o valor que queremos alterar o valor modal dois. Então, queremos mudá-lo para falso. O que isso vai fazer é qualquer valor que estamos passando com modelo V irá mudá-lo diretamente para qualquer valor que especificarmos aqui. Se eu salvar isso, agora, mostrar o modal, clico no botão modal alto. Podemos ver que o modal está oculto. Agora vemos um aviso no console aqui, valor do modelo de atualização de evento, mas ele não é declarado na opção emits nem como um problema de valor modal de atualização. Só precisamos adicionar esse evento ao nosso array emits aqui, assim, atualiza o valor modal de dois pontos. Isso deve se livrar desse aviso. Mostre o modal e oculte o modal. E não vemos mais o aviso. Como não estamos mais usando esse evento modal alto, podemos simplesmente removê-lo dessa matriz. Salve isso. E se eu voltar para a visualização de modais, vista de ponto não precisamos mais ouvir esse evento modal de ocultação, pois agora estamos manipulando o vetor modal show usando o valor modal de atualização de n. Então, podemos nos livrar disso agora. Salve isso. Agora vamos ver se esse é o trabalho. E, no entanto, ainda está funcionando. Vamos voltar para a vista de pontos modais. Também podemos emitir se eu tivesse valor do modelo de atualização diretamente do nosso modelo também. Então, em vez de disparar esse método aqui, vou apenas comentar esse método, mas deixá-lo lá para referência. Podemos simplesmente alterar esse manipulador de cliques ao usar o método de emissão do dólar. Basta simplesmente emitir atualizações valor do modelo de dois pontos e , em seguida, definir o valor para o qual queremos configurá-lo, o que é falso. Salve isso. E vamos ver se isso ainda está funcionando, isso ainda funciona também. Assim, você pode ver que o uso do valor modal e valor do modelo de atualização simplifica massivamente nossa comunicação filho para pai e, muitas vezes, remove a necessidade configurar eventos personalizados e , em seguida, ouvir aqueles personalizados eventos. 44. Componentes dinâmicos - Parte 1: Componentes dinâmicos nos permitem trocar o componente que está sendo usado em algumas partes do nosso aplicativo. Vamos demonstrar isso criando uma versão escura do nosso modelo, que podemos alternar nesta página de modais bu.edu com base em uma caixa de seleção. Agora, em um aplicativo do mundo real, se você quisesse ter modais que fossem claros e escuros, então a melhor coisa a fazer seria ter apenas um componente modal e trocar os estilos usando adereços. O que estamos prestes a fazer não é exatamente uma prática recomendada, mas é uma maneira agradável e fácil de demonstrar os conceitos de componentes dinâmicos. Primeiro, vamos tornar nosso componente modal na visualização de pontos modais, um componente dinâmico. Então, tudo o que precisamos fazer é mudar isso para um componente. Componente. Vou me certificar de que as tags de abertura e fechamento foram renomeadas. E então nós apenas adicionamos um suporte S. Então, dois pontos são, e nós apenas definimos isso para o componente que queremos exibir aqui. Só queremos exibir nosso componente modal. Então, podemos usar o nome modal. Defina isso para salvar isso modal. Ele deve estar funcionando como antes. Vou clicar no show modal. E, no entanto, ainda podemos ver o modal. Ainda podemos ocultá-lo, exceto que agora podemos realmente alterar o componente que é exibido aqui simplesmente alterando isso é prop, programaticamente. Então, antes de criarmos nossa visão escura do nosso modal, vamos adicionar uma caixa de seleção à página que podemos usá-la para alternar se mostramos ou não modais claros ou escuros. Então, depois do nosso título, vou adicionar uma div. E então, dentro disso, vou adicionar um rótulo. E então, dentro disso, vou colocar os textos mostram modais escuros, ponto de interrogação. E depois que os textos permitiram uma entrada, defina o tipo como caixa de seleção. Vamos salvar isso para garantir que ele esteja bem. E sim, isso parece muito decente. Agora vamos definir então pay ref, que combinamos com esta caixa de seleção. Então, vamos rolar para baixo até nossa seção de script acima deste show modal href. Vamos adicionar uma nova referência chamada modais Chau Doc que é igual a um rap com um valor inicial de false. E usaremos esse gráfico para determinar se mostramos modais de ponto ou modais de luz. Então agora vamos encontrar esse href nossa caixa de seleção, que está aqui. Podemos apenas definir o modelo V para mostrar os modais doc. Salve isso. Só para ter certeza de que isso está funcionando, vou adicionar uma pré tag após esta div e apenas exibir os modais show doc. Salve que podemos dizer que é falso inicialmente. E se marcarmos, a caixa de seleção está definida como true. E se desmarcarmos, ele é definido de volta para false antes de criarmos nosso modal de pontos, vamos apenas remover essa pré-etiqueta em Salvar. 45. Componentes dinâmicos - Parte 2: Vamos criar nosso modal escuro. Então, vamos pular para a visualização de pontos modais. Eu só vou remover esses comentários sobre este também. Salve isso. E agora vamos duplicar esse módulo de componente para componentes de origem no modal w. Duplicar com a extensão de ação duplicada nomeará essa visualização de ponto doc modal. Vamos mudar a classe nesta div para traço modal escuro. Role para baixo até os estilos, alterou a classe aqui para traço modal escuro em vez de um fundo bege. Vamos definir isso para hash 333, que será uma cor cinza escuro. E então definiremos a cor, a cor do texto para branco e salvaremos isso. Só para reiterar, se você quisesse ter modais que eram claros e escuros em um mundo real, então essa não seria a melhor maneira de fazer isso porque estamos duplicando muito do nosso código aqui. Seria melhor ter apenas um único componente Vue de ponto modal, que podemos então passar um prop para dizer um adereço chamado escuro. E então, se recebermos essa prop, adicione uma classe diferente ao modal para dar estilos diferentes. Só estou usando isso como exemplo para demonstrar componentes dinâmicos, mas não como um exemplo de melhores práticas. Agora vamos pular a visualização dos modais, a visualização de pontos, e agora podemos alternar o componente que é usado neste S prop com base em nossos modais show dot ref. Então, antes de tudo, precisamos importar o componente modal escuro. Vou duplicar esta linha, alterá-la para doc modal, alterar o nome do arquivo aqui para modal dark. O que podemos fazer nisso é prop. Podemos usar uma declaração ternária if aqui para cuspir um componente diferente com base em nossos modais show dot ref. Assim, podemos fazer se os modais Chau Doc forem verdadeiros, então usaremos o componente escuro modal. Caso contrário, usaremos o componente modal. Então, vamos salvar isso. Clique no botão Mostrar modal. Vemos a luz modal alta Doc. Vou marcar a caixa de seleção que mostrou a configuração mostrou modais como true. E devemos ver nosso modal. Agora, se clicarmos no botão, lá vamos nós. Agora podemos alternar facilmente entre nossos modais claro e escuro. 46. Fornecer/injecção - Parte 1: Vimos como passar dados de um componente pai para seu componente filho direto usando props. Mas e se quisermos passar dados para um componente filho realmente profundamente aninhado, bem, usando props, precisaríamos passar os dados de pai para filho para filho e assim por diante até que nós alcançar o componente filho desejado sobre isso pode ser uma maneira muito confusa de passar dados. E podemos contornar esse problema usando o fornecimento injetar. Vamos pular para o nosso componente raiz App.vue. Basta fechar tudo primeiro e iremos para source e app.vue. Digamos que tenhamos um objeto reativo neste componente com alguns dados que queremos passar até esse componente modal. Primeiro de tudo, vamos configurar um objeto reativo em app.vue. Vamos adicionar nossa seção de script, nossas tags de configuração de script. Digamos que tenhamos um objeto reativo com alguns dados do usuário. Muitos comentários de bloco aqui, que dizem dados do usuário, configura uma constante chamada conjunto de dados do usuário igual a objetos reativos. Agora precisamos importar reativo de modo de exibição. Muitos outros comentários que dizem que as importações importarão reativas de vista. E vamos adicionar alguns dados a esses objetos reativos de dados do usuário. Digamos que ele tenha uma propriedade name. Definiremos isso como Danny e uma propriedade de nome de usuário, e definiremos isso como Dani caudal. Salve isso. E vamos exibir esses dados no canto superior direito da nossa página. Vou pular para o topo do modelo. Adicione uma div com uma classe de dados do usuário que permitem chaves duplas. Nome do ponto de dados do usuário. Em seguida, iremos exibir o nome de usuário também. Então, muitos símbolos de at e , em seguida, chaves duplas e, em seguida, use um nome de usuário de ponto de dados. Salve isso. Vamos pensar em alguns estilos para fazer isso parecer um pouco melhor. Vou rolar para baixo até a parte inferior da seção de estilo. Div de dados do usuário alvo. Vamos definir a posição absoluta, o fundo, bege na parte superior para 0 para colocá-la na parte superior, a direita para 0 também. Então, nós o temos no canto superior direito. Definirei o tamanho da fonte para 12 pixels, um pouco de plotagem também, cinco pixels. Salve isso. Agora vamos supor que queremos passar esses dados para o componente modal usando props. Bem, antes de tudo, precisamos passá-lo como um prop para o nosso componente de visualização de roteador, assim, os dados do usuário de dois pontos são iguais aos dados do usuário. Salve isso, que precisamos receber isso em nossa página de modais. Exibições de código-fonte, modais visualizados para cima. Vou apenas adicionar um comentário aqui que diz adereços. Que precisamos adicionar uma constante chamada props, definir que é igual a definir. As props passam os dados do usuário. Suporte. Vou definir o tipo como objeto. E agora precisamos passar esses objetos de dados do usuário novamente para o componente modal, que é, Ei, podemos fazer, ir ao longo dos dados do usuário igual a dados do usuário, salvar isso. E agora precisamos abrir o componente modal que recebeu este prop. Precisamos adicionar o suporte aqui. Portanto, use um conjunto de dados, o tipo dois objetos. Agora, finalmente, podemos usar esses objetos de dados do usuário em nosso modal. Então, muita div depois desse botão aqui. Lá eu vou colocar o nome de usuário é chaves duplas. Use um nome de usuário de ponto de dados. Salve isso, recarregue, mostre o modal. Podemos ver o nome de usuário no modal. Você pode ver que isso fica confuso muito rapidamente, especialmente em um mundo real quando você pode ter componentes que estão muito mais profundamente aninhados. Feito esse componente modal. 47. Fornecer/injecção - Parte 2: Então, vimos que eu não queria passar dados do app.vue para a visualização de ponto modal, temos que passá-los como um prop para a visualização do nosso roteador. Em seguida, receba essa prop na visualização de modais, na visualização de pontos e, em seguida, passa-a para baixo como propaganda para model.py EU e , em seguida, receba no modal w antes que possamos realmente usá-lo. Essa abordagem não é muito problema. Então, vamos corrigir esse problema usando fornecer injetar. Então, primeiro, vamos remover todas as alterações que fizemos aqui com props na visualização model.py. Vamos remover essa div que adicionamos e também remover essa prop de dados do usuário do nosso objeto props. Salve isso e, em seguida, pule para a visualização de pontos de visualização de modais. Remova essa prop de dados do usuário do componente, componente e, em seguida, remova nosso objeto props. Salve isso. Em seguida, vamos pular para app.vue e removeremos essa prop da nossa visualização do roteador, salvaremos essa recarga. E agora vamos usar o provide para tornar esse objeto reativo de dados do usuário disponível para todos os nossos componentes filho app.vue, não importa o quão profundamente eles estejam aninhados. Primeiro, precisamos importar o método de fornecimento da exibição. E agora, depois de declararmos objetos reativos de dados do usuário, podemos simplesmente acionar esse método de fornecimento. Para o primeiro parâmetro, só precisamos fornecer um nome de espaço reservado para esses dados para que possamos acessá-los em nossos componentes filho. E fazemos isso como uma corda. E vou dar a isso o mesmo nome nossos dados de usuário de objeto reativo e, em seguida, seguirei o segundo parâmetro. Acabamos de passar os dados que queremos disponibilizar, que neste caso é esse objeto reativo UserData. Definirei o segundo parâmetro para usar dados. Salve isso. E agora esses dados agora devem estar disponíveis para todos os componentes filho do app.use. Agora não precisamos fazer nada para a vista de pontos de vista do modelo. Podemos pular para a vista model.py do componente neto e podemos pegar esses dados usando injetar. Vamos pular direto para a vista de pontos modais do neto. E agora precisamos importar o método de injeção da exibição. Um comentário alto que diz impulso na parte superior, apenas importará injetar da vista. E agora podemos usar esse método. Então, vou pular para a parte inferior da seção de script um novo comentário que diz dados do usuário. Tudo o que precisamos fazer para capturar esses dados que estão sendo fornecidos é phi do método do objeto. E passe o nome do espaço reservado como uma string, que usamos em nosso método Fornecer, que são dados do usuário. Tudo o que precisa fazer é injetar dados do usuário para disponibilizá-los neste modelo, só precisamos atribuí-los a uma constante ou a uma variável. Então, vamos apenas atribuir isso a uma constante com o mesmo nome, dados do usuário como esse. E agora podemos acessar esses dados com essa constante UserData. Então, se voltarmos para o modelo novamente, muita div depois desse botão. E vou colocar o nome de usuário com dois pontos, chaves duplas e, em seguida, usar um nome de usuário de ponto de dados. Salve isso, recarregue, mostre o modal e agora podemos ver nosso nome de usuário. Mas simplificamos massivamente nossos componentes usando o fornecimento injetar. 48. O que é Composable? [Módulo 11]: Neste módulo, vamos aprender sobre o composable. No composable há um dos recursos mais interessantes que vêm com o AF2013 na API de composição. Mas o que é um composable? Bem, você pode pensar no composable como as APIs de composição equivalentes a mixins da API de opções. Embora com muitos benefícios adicionais, eles nos permitem extrair dados e métodos reativos. Eu os mantenho separados de qualquer componente específico para que possamos reutilizar facilmente esses dados e métodos reativos em vários componentes sem precisar duplicar código. Temos aqui um exemplo de algum código de um componente de exibição usando a API de composição. E temos algum código relacionado a um nome de usuário. Aqui, temos uma referência de dados de nome de usuário para armazenar um nome de usuário e, em seguida, temos uma função para atualizar esse nome de usuário. Então, digamos que queremos reutilizar este nome de usuário rref e este método de atualização Username em vários componentes. Que podemos simplesmente extraí-los em um composable, assim. Composable é basicamente apenas uma função e podemos colar todos os nossos dados e métodos reativos , relógios, propriedades computadas, etc., nesta função e, em seguida retornar o material de este composable que queremos disponibilizar. Podemos então importar esse composable para qualquer componente e, em seguida, usar a estruturação para extrair as coisas que queremos. Nesse caso, os dados do nome de usuário ref e a função de nome de usuário. E podemos então usá-los nesse componente. Se você quiser saber mais detalhes sobre os benefícios do composable over mix-ins, então você pode ir para este artigo em View skill.io. O que é um composable Vue.js? Muito o link para a palestra. Mas, em resumo, os principais benefícios do composable over mixins é, em primeiro lugar, eles deixam completamente claro de onde todos os nossos dados e métodos, etc, estão vindo. Se analisarmos esse exemplo da API de opções aqui, temos um componente que está importando três mixins diferentes. E então estamos usando uma propriedade de dados chamada site de um desses mixins. Mas, ao olhar para esse código, não é óbvio de onde esta propriedade do site está vindo sem ter que abrir esses mixins e examinar os arquivos. Enquanto com o composable, sempre sabemos exatamente de onde nossos dados estão vindo. Você pode dizer que neste exemplo de API de composição, estamos importando três composable diferentes. Aqui. Estou pegando uma propriedade de nome de um deles. Podemos dizer claramente que isso vem do produto composable dos EUA. Então composable é deixar muito mais claro de onde tudo está vindo. O Composable também reduz o risco de colisões de nomenclatura. Então, novamente, temos um exemplo de API de opções aqui que está puxando três mix-ins diferentes. Agora, se todos esses mix-ins tiverem uma propriedade de dados chamada name, e então usaremos isso em nosso componente. Isso só vai pegar a propriedade name do último mixin, que importamos. As propriedades de nome nos outros dois Mixins serão completamente ignoradas. O Composable também facilita a proteção de nossos dados reativos. Em outras palavras, faça as propriedades de dados em nossos objetos de dados somente leitura de fora da mistura, para que possamos realmente alterar os dados dentro do mixin. Não podemos fazer isso com mix-ins. O que temos composable. Quando retornamos o material que queremos expor do composable, podemos expor valores como somente leitura para que eles não possam ser alterados de fora do composable, apenas de um método que está dentro do composable. O último benefício do composable é que podemos realmente usá-los como um sistema global de gerenciamento de estado. Assim, podemos efetivamente criar uma loja composable com vários dados e métodos diferentes. Quando alteramos as propriedades de dados nesse armazenamento. Eles sempre estarão atualizados em todos os diferentes componentes em nosso aplicativo. Enquanto não podemos fazer isso com mix-ins. Se tentarmos fazer isso com mix-ins, os dados sempre serão redefinidos para cada componente em que usamos essa mistura. Considerando que, com o composable, podemos facilmente criar um armazenamento de gerenciamento de estado onde quando os dados mudam, sempre veremos as alterações nesses dados refletidas em todos os componentes que estão usando isso composable. Se você não sabe o que é gerenciamento de estado e não se preocupe porque vamos cobrir isso no próximo módulo. Bem, esses são alguns dos principais benefícios do composable sobre mixins. 49. Crie uma composable: Vamos criar nosso primeiro composable. Vamos voltar para nossa página inicial. Vamos abrir a página inicial. Portanto, visualizações de código-fonte e visualização inteira, visualização de pontos. Digamos que queremos usar nossos dados de conselheiro e os métodos relacionados em vários componentes. Bem, poderíamos fazer isso usando um composable. Agora vamos voltar para o nosso explorador. E é recomendável que todos os nossos composable entrem em uma pasta chamada use. Em nossa pasta de origem, criaremos uma pasta chamada US. E lá vamos criar nosso primeiro composable. E, a propósito, recomenda-se que todos os nomes de arquivos para composable sejam escritos em CamelCase. Comece com a palavra use. Vamos chamar isso de composable. Use o ponto contador js. Em nosso composable, queremos apenas criar uma função com o mesmo nome que nosso conselheiro de uso de arquivos. Em seguida, queremos exportar essa função para torná-la disponível para todos os arquivos. E agora podemos cortar todas as nossas contas de dados e métodos relacionados e colá-lo aqui. Vou saltar de volta para nossa vista de ponto de vista inicial. E eu copiarei todo o código relacionado ao contador, os objetos reativos de dados do contador, o observador, a propriedade ímpar ou mesmo computada, o aumento dos métodos de contador e diminuição de cálcio e falcão não derretido. Então, podemos simplesmente cortar essa piada para usar o council dot js dentro dessa função. E ainda precisamos importar todos os poucos métodos que estamos usando, como reativos , assistidos e computados. Então eu vou voltar para um ponto de vista inicial Vue. Basta copiar a instrução de importação. Volte para usar o contador ponto js. Basta colar isso no topo. Vou esticar isso um pouco. Não estamos usando os métodos ref, então podemos nos livrar disso e salvá-lo agora para disponibilizar esses dados e métodos para quaisquer componentes em que usamos esse composable, precisamos expô-los retornando-os na parte inferior desta função. Assim como fizemos em nossos componentes quando estávamos usando o padrão de função de configuração mais antigo para nossos componentes. Então, vamos começar um objeto de retorno aqui, e vamos apenas retornar as coisas que queremos usar. Vamos retornar os dados do contador, objetos reativos, a propriedade ímpar ou mesmo computada, os dois métodos para aumentar e diminuir o contador. Assim, podemos simplesmente retornar dados do contador, depois ímpares ou pares, então aumentar o contador e diminuir o contador e salvar isso. E agora podemos puxar esse composable em qualquer componente que quisermos e ter acesso à propriedade e aos métodos computados de dados que estamos retornando aqui. 50. Use nossa composable: Agora podemos importar esse composable para nossa página inicial que agora está quebrada porque ele está tentando acessar os dados do conselheiro. Audite uma propriedade computada uniforme que não existe mais neste componente. Então, antes de tudo, precisamos importar esse composable. Então, podemos simplesmente importar. Em seguida, o nome da função que criamos aqui usa importação de Kaltura, use contador de barra, contador de uso de barra de usuários, salve isso. A propósito, há algumas coisas que não estamos mais usando nesta instrução de importação. Podemos ver que está acinzentado. Então, vou me livrar da computação reativa e assistir ao próximo tiquetaque. E agora precisamos ter acesso para usar o conselho composable. Então, vamos rolar para baixo até este comentário do contador que é deixado antes. Existem duas maneiras de acessar os dados e métodos que estão em nosso composable. Se não quisermos alterar nosso modelo, que atualmente está procurando por um objeto chamado métodos de dados Kaltura chamado contador de diminuição e contador de aumento, essa propriedade automática ou até mesmo computada. Em seguida, podemos usar a estruturação para pegar apenas as coisas que precisamos de nosso composable os dados do contador ímpar ou mesmo sob nossos métodos de conselheiro aumentados e de contador de diminuição. Para fazer isso, podemos criar uma constante que é um objeto e definir que seja igual ao nosso contra-composable dos EUA. E então podemos simplesmente adicionar as coisas que queremos extrair do decomposto para esse objeto. Portanto, não vamos orientar dados ímpares ou pares, aumentar o contador, diminuir o contador. Porque esses são os mesmos nomes que estamos usando em nosso modelo aqui. Os dados da Caltech diminuem o conselheiro aumentar o contador, ímpar ou mesmo do que isso não deve funcionar. Então vou salvar essa recarga da página inicial, que agora parece estar funcionando novamente. Podemos dizer que tudo ainda está funcionando, incluindo nossa propriedade computada aqui. Agora, a outra maneira que podemos acessar todas as coisas impossíveis é apenas atribuindo todo o nosso composable esse uso função COUNTA a uma constante ou variável como esta. Por exemplo, podemos acessar nossas contagens, um objeto de dados, objetos de contador de pontos de dados de contador. E podemos acessar nosso método de cálcio aumentado ou contador de aumento de pontos. Se estivermos fazendo isso dessa maneira, precisaremos atualizar nosso modelo, estamos preparados e tudo com pontos de conselheiro onde estamos usando o título de ponto de dados do contador, precisamos prefixar isso com ponto de contador. Todos esses métodos precisamos prefixar com o ponto de câncer e , em seguida, precisamos preparar esses dados de contador com contagens adotadas e nossa propriedade computada com ponto de conselheiro no modelo V em este título aqui com o ponto do conselheiro também. Salve essa recarga e espero que tudo ainda esteja funcionando. Sim, parece estar funcionando. No entanto, embora às vezes agarrar todo o composable assim possa fazer sentido neste caso, e em muitos casos acho que a abordagem anterior faz mais sentido porque nos permite ver exatamente o que estamos pegando desse composable em particular. Então, vou desfazer tudo. Acabei de fazer. Livre-se de todas essas contagens de pontos que adicionamos. Mude isso de volta para a abordagem de estruturação de D , onde podemos dizer claramente exatamente o que estamos pegando do composable. Apenas certifique-se de que isso ainda esteja funcionando. Tudo ainda está funcionando. 51. Reuse nossa composable: Agora vamos reutilizar nosso composable em nossa página de postagens. Então, vamos abrir isso. Exibição de visualizações e postagens, vista superior. Digamos que queremos uma versão muito mais simples do nosso contador nesta página, digamos que possamos adicionar um botão que tenha o contador dentro dele. E então, quando clicamos no botão, ele aumenta o contador em um. Então, primeiro vamos adicionar o maquete. Depois da área de texto. Vou adicionar um botão. Dentro disso. Vou colocar 0 por enquanto. Muitas classes de botão Counter salvam isso. Vamos cercar isso em uma div que ele vá para uma nova linha. Salvar isso permitiu alguns estilos básicos. Portanto, contagens escuras ou o tamanho da fonte para 60 pixels, defina a largura para 100%, defina a cor de fundo como rosa. Salve isso. Queremos substituir este 0 pelo nosso contador. E quando clicamos na parte inferior, queremos aumentar o contador. Então, primeiro vamos importar o composable. Portanto, importar contador de uso de usuários de barra use conselheiro, salve muitos novos comentários aqui. advogado Bolton cresceu o material que precisamos do composable. Então, configuraremos um const com um objeto, definido que é igual à nossa função composable. Você usa parênteses de contador. E tudo o que vamos precisar por enquanto é o objeto reativo de dados do conselheiro que contém nosso contador, o método de contador de aumento. Salve isso. Agora vamos voltar para o nosso modelo. Livre-se deste 0, substitua-o por chaves duplas e dados de conselheiro, contagem de pontos, salve isso. E, em seguida, vamos adicionar um manipulador de cliques a este botão. Então clique em aumentar o contador. Vou aumentá-lo em uma poupança. Você pode dizer que isso agora está funcionando. Agora vamos dizer que decidimos que queremos que esse botão seja amarelo. Quando o número for ímpar. Podemos fazer isso sem mesmo propriedade computada que esteja em nosso composable. Então, só precisamos pular para o nosso objeto estruturado em D aqui e também são os ímpares ou pares. E vamos rolar de volta para o nosso botão. Então, digamos que queremos adicionar uma classe a isso. Se o número for ímpar, podemos pensar em uma classe de amarelo, digamos. Mas somente quando ímpar ou par é igual a ímpar. Porque lembre-se de que esta propriedade computada automática ou até retorna uma string de par ou ímpar. Vou salvar isso. E se olharmos para o botão nas ferramentas de desenvolvimento, clicamos nele, ele muda para um e podemos ver que a classe de amarelo está sendo adicionada. Para clicar nele novamente, a classe foi removida. Então, vamos apenas adicionar algum estilo para fazer com que este amarelo vise o elemento do botão do contador Dash novamente, mas quando ele tiver uma classe de amarelo, defina a cor de fundo como amarelo, salve essa recarga. Nós saímos, dizemos que livros, é amarelo quando o número é ímpar. Agora, uma coisa a observar é que o conselho voltará para 0 quando mudarmos de página. Se eu pular para a página inicial, podemos dizer que isso é 0 novamente. Se eu aumentá-lo e voltar para a página de postagens, este voltará para 0 novamente. Isso ocorre porque uma nova instância desse método de contador de uso será criada toda vez que mudarmos a página. Se quisermos que nosso conselheiro seja um contador global que não será redefinido quando mudarmos página e podemos simplesmente mover esse objeto de dados do conselheiro para fora da função do Conselho dos EUA. Vou apenas selecionar isso e movê-lo para fora da função. E isso fará com que esses dados do conselho sejam objetos globais que estão disponíveis em todos os lugares. Então, vamos salvar isso. E agora, se eu aumentar o personagem para, digamos que seis e caímos para a página inicial porque digamos que ainda são seis. Se aumentarmos novamente aqui para digamos dez, brinque de volta para a página de postagem. Podemos ver que o conselheiro tem dez anos e agora nunca perdemos o controle do nosso contador global. 52. Adicione composable do VueUse: Uma ótima fonte de composable pronto para usar é a biblioteca de uso da visualização. Vamos pular para ver use.org. Tudo o que precisamos fazer é instalar esta biblioteca e teremos acesso a mais de 150 composable prontos. Então, vamos pular para começar. E veja como podemos instalar uma biblioteca com esse comando. Então eu vou copiar isso, abrir nosso terminal. Alkyne é um processo surdo pressionando Control e C nesse atalho pode ser diferente em sua plataforma. E então lançaremos esse comando que acabamos de copiar. Agora instalado. Então, vamos relançar nosso projeto executando npm run dev. Agora devemos ser capazes de usar essa biblioteca. Vou esticar isso um pouco. Vou pular para o censo. Role para baixo. Vou usar esse uso online composable. Este composable nos permite ver facilmente se estamos ou não online no momento. Então, se você olhar para esse status online aqui, se eu me desconectar da Internet, você poderá ver essa alteração para offline. E vou apenas reconectar. Vou usar este porque é bom e fácil de integrar. Então, poderíamos usar isso em nosso pequeno widget de informações do usuário na coluna. Vamos fechar tudo. Abrirá o código de origem app.vue. Vamos voltar para a página de documentação. Só precisamos importar o uso on-line do caso você usar slash core. Então, vamos copiar essas duas linhas. Colá-los no topo da nossa seção de scripts em app.vue. Recue isso. E eu vou chamar isso, colocá-lo em sua própria seção aqui. Muitos comentários que dizem status online. Cole isso lá dentro. E agora essa constante online deve mudar o Verdadeiro ou falso, dependendo se estamos online ou offline. Então, vamos usar isso em nosso pequeno widget de usuário. Então, depois do nome de usuário, muitos cachimbos e um espaço, e eu apenas pressionarei Enter para colocar isso na nova linha. Adorei o aparelho duplo encaracolado do Word Online. Devemos ser capazes de produzir essa constante online. Salve isso. Agora podemos dizer online true, e se eu desconectar o Wi-Fi, você verá online false. Poderíamos melhorar isso usando essa constante online para cuspir diferentes textos de cores diferentes dependendo se isso é verdadeiro ou falso. Então eu vou remover tudo isso, basta colocar o espaço de status da rede de textos e, em seguida, uma nova linha e muito espaço. E então, dentro das chaves duplas, usarei uma declaração ternária if aqui. Se online for verdade, então cuspirá online. Caso contrário, cuspirá offline. Salve isso. E está definido como online agora, vamos desativar a internet. Vemos uma mudança para offline. Vamos mudar a cor também. Neste local, vou me ligar ao atributo style. Definiremos a propriedade color e, novamente, usaremos uma instrução if ternária. Então, se online for verdade, então vou definir o grau mais frio. Caso contrário, vamos defini-lo para vermelho. Salve isso. E podemos dizer que o status da rede online com texto verde, desabilitou o Wi-Fi. E dizemos offline com texto vermelho, e vou reativar o Wi-Fi. Certifique-se de verificar todos os diferentes composable que estão disponíveis no uso de exibição antes de começar a trabalhar no seu próximo projeto de visão grande , pois isso pode economizar muito trabalho. 53. O que é gestão de estado? [Módulo 12]: Neste módulo, vamos adicionar gerenciamento de estado à nossa arte usando um centavo. Mas o que é gerenciamento estatal? Bem, antes de tudo, vamos dar uma olhada no problema que ele resolve. Então, eu tenho três dos nossos componentes de aplicativos, open hair, App.vue, que é nosso componente de visualização raiz. Em seguida, os modais exibem a visualização de pontos, que é esta página, que é um filho direto do App.vue. E então eu modelei a visão, que é esse modal, que é um filho direto da visualização de pontos de visualização de modais. Vimos anteriormente que poderíamos passar dados do App.vue, este objeto de dados do usuário, até a visualização de ponto modal do componente neto usando props. Para fazer isso, temos que passar uma prop para baixo para o componente de visualização do roteador. Em seguida, na visualização de pontos de visualização de modais, tivemos que receber essa prop configurando um método de prompts definido. Em seguida, adicionamos para passar esse prop novamente para o nosso componente modal. Que na visualização de pontos modais temos que receber isso novamente adicionando-o ao nosso objeto props. E então, finalmente, poderíamos usar esses dados na visualização de pontos modal. E vimos que essa abordagem era uma verdadeira dor na bola. Em seguida, melhoramos isso usando o provide inject, que significava que, no app.vue, poderíamos apenas fornecer esse objeto de dados do usuário uma vez que os disponibilizassem para todos os nossos componentes descendentes app.vue, todos os seus filhos e netos. E então, na visualização de pontos modais, poderíamos injetar este objeto de dados do usuário uma vez e depois usá-lo em nosso modelo. Isso foi definitivamente uma melhoria. Ainda podemos ter alguns problemas aqui. Número um, forneça só disponibilizará dados para descendentes do componente em que os usamos. Portanto, ele só disponibilizará os dados para filhos e netos desse componente. Mas e se tivermos um componente que não é descendente do App.vue, que não faz parte de sua árvore de componentes. E queremos que esse componente possa acessar esses dados. Nesse caso, o fornecimento não funcionará porque eles só disponibilizam dados para descendentes desse componente. O outro problema é, e se quisermos ser capazes de alterar esses dados que estão no app.vue da visualização de ponto modal do componente neto. Bem, agora precisaríamos acionar um evento personalizado na visualização de pontos modais. Escute o evento na visualização de pontos modais, acione outro evento personalizado. Escute esse evento em app.vue antes que finalmente possamos acionar um método no App.vue, que então altera os dados. E, novamente, isso fica muito confuso. Se quisermos alterar esses dados de um componente que está fora da árvore de componentes App.vue, então não podemos fazer isso, a menos que estejamos usando um evento na maioria das bibliotecas ou algo parecido. Mesmo usando eventos, a maioria das bibliotecas pode ficar bastante confusa para o gerenciamento de estados nos permite resolver esse problema armazenando todos os dados principais de nossos aplicativos e todos os métodos relacionados a esses dados em um único lugar centralizado, que está fora de todos os nossos componentes, mas de uma forma que todos os nossos componentes possam acessar todos os dados e métodos. O local onde armazenamos esses dados e métodos que chamamos de loja. Porque quando criamos nossos projetos, optamos por adicionar opinião automaticamente ao nosso aplicativo. A ferramenta de compilação já criou um centavo ou arquivo de armazenamento para nós. Vamos abrir isso. Vou abrir o Explorer. E queremos ir às lojas Source e conta ab.js. Na opinião, como se tivéssemos três seções principais. Ações estatais sobre palpites. No estado é onde armazenamos todas as nossas propriedades de dados. Assim, você pode ver uma propriedade de dados de contador aqui. Não se confunda com o fato de que criamos um contador. Esse código não foi gerado com base em nada que estamos fazendo. Esta é apenas a loja padrão que é enviada quando consideramos nossos projetos usando a compilação x2. Temos o estado em que armazenamos todas as nossas propriedades de dados. Vamos adicionar nossas propriedades de dados de título de contador e conselheiro aqui. Em seguida, temos ações em que podemos armazenar métodos que podem acessar os dados que estão no estado e também modificá-los. Você pode ver que temos um leilão de incrementos aqui, o que está aumentando esses conselheiros no Estado. E vamos adicionar nosso maior conselheiro e diminuir os métodos do conselho aqui mais tarde. Finalmente, temos suposições aqui. Colocamos métodos que podem pegar algo do estado, então possivelmente modificá-lo de alguma forma e depois devolvê-lo. Então, você poderia pensar nelas como propriedades calculadas. Uma loja de gerenciamento de estado como essa está disponível em todos os lugares em nosso aplicativo. Todos os componentes em nosso aplicativo, independentemente da árvore de componentes que fizessem parte ou quão profundamente aninhados eles podem acessar todas as ações do estado e nos obter que estão nessa loja. Isso torna muito mais fácil para nós gerenciar nossos aplicativos chamados dados e todos os métodos relacionados a esses dados. E isso também significa que não precisamos nos preocupar em ter que passar dados de pais, de uma criança para criança usando adereços ou fornecer. Não precisamos nos preocupar com eventos borbulhantes de criança para pai para pai, etc. Já que todos os nossos componentes de aplicativos têm acesso a tudo o que está nesta loja. Em uma versão v3, há algumas maneiras diferentes integrar a gestão do estado, a menos que o espaço do discurso a seguir. 54. Composable State vs Vuex vs Pinia: Em uma visão três acima, existem três maneiras principais integrar o gerenciamento de estado. Número um, podemos integrar gerenciamento de estados usando o composable. Número dois, podemos usar o UX, que é um pacote de gerenciamento de estado criado pela equipe Vue. No número três, podemos usar penny, que é outro pacote de gerenciamento de estado criado pela equipe Vue. Vamos dar uma olhada no gerenciamento de estado número um usando o composable. Bem, se saltarmos para o composable que criamos antes, use o contador na pasta dos EUA. O que resolvemos aqui é a base para um sistema global de gerenciamento estatal. Porque temos nossas contagens são dados atingidos, o que você poderia pensar em um estado. Temos alguns métodos para alterar os dados nesse estado, que você poderia pensar como ações. Temos essa propriedade computada que captura os dados do estado e gera uma string com base nisso, par ou ímpar. Poderíamos pensar nisso como um getter. Como o objeto de dados está fora dessa função , esses dados são globais. E assim podemos mudar isso de qualquer lugar e sempre ver as mudanças que fazemos em qualquer outro lugar. Então, vimos que podemos aumentar o conselheiro na página inicial e depois ir para a página de postagens. Ainda vemos que o conselheiro está definido com o mesmo valor que e da mesma forma, se voltarmos para a página inicial. Assim, podemos realmente usar o composable assim para gerenciar todo o gerenciamento de estado do nosso aplicativo sem precisar instalar nenhum pacote extra. Se você quiser saber mais sobre gerenciamento de estados com a API de composição e verificar meu vídeo de gerenciamento de estado da API de composição no YouTube. Link para esta palestra. No entanto, se você quiser uma abordagem mais padronizada e otimizada para o gerenciamento de estados com recursos de depuração mais avançados e integração com DevTools. Em seguida, você vai querer usar um pacote criado especificamente para gerenciamento de estado, como UX ou centavo. Por muito tempo, o UX tem sido o padrão ouro para gerenciamento de estado para aplicativos Vue. No entanto, de acordo com Avenue, o criador de você, o padrão ouro atual para gerenciamento de estado para aplicativos de API de composição V3 é Penny. Penny ou tem algumas vantagens sobre a UX. Se saltarmos para esta loja, este centavo uma loja conta ab.js. Na opinião, embora tenhamos apenas três seções, ações de estado e getters, nossas ações podem acessar o estado e manipulá-lo também. Enquanto estiver em exibição, as ações não podem manipular o estado. Eles podem acessar o estado da conta, manipulá-lo. Se essa fosse uma porta UX, isso não funcionaria porque em uma loja, bem como ações de estado e nos leva, também temos mutações, que são métodos que podem manipular os dados que estão em o estado. Se isso fosse uma vista ao lado e quiséssemos aumentar esse contador, não conseguiríamos aumentar o contador dessa ação. Teríamos que desencadear uma mutação. Primeiro. Podemos ter uma mutação chamada incrementos. Essa mutação aumentaria o contador e precisaríamos acionar essa mutação do leilão usando algo como incrementos de despacho. Isso significa que, em uma vista ao lado, muitas vezes você acaba com toneladas de métodos diferentes que têm o mesmo nome, onde estamos acionando uma ação e, em seguida, desencadeando uma mutação e depois mudando o estado em uma loja complicada. Isso resultou em toneladas de linhas extras de código e complexidade para nossa loja, quais ainda não precisamos nos preocupar com o pin. Porque com Penny Are não temos mutações. Só temos ações. E as ações podem acessar o estado e manipulá-lo também. Também temos recursos de depuração mais avançados incorporados ao Pena, que veremos mais tarde. Também é extremamente leve em torno de um kilobytes e é otimizado especificamente para a API de composição. Vamos ver como poderíamos usar um centavo em todo o gerenciamento estadual para este aplicativo. Desde quando construímos nossos projetos, optamos por adicionar Pena automaticamente. Então a opinião já foi adicionada ao nosso projeto e esta loja já foi resolvida para nós. Podemos usar isso como base para nossa gestão estadual. No entanto, mais tarde no curso, quando criarmos as bolas de notas para cima, mostrarei como adicionar um centavo, inquietou sua primeira loja completamente do zero. Isso é realmente útil para saber caso você precise adicionar opinião a projetos v3 que já existem. Mas se você está curioso sobre como fazer isso agora, mas apenas pule para a frente para as bolas de notas. Penny, um módulo, assista aos primeiros vídeos e depois pule de volta aqui. 55. Pina - Estado - Parte 1: Atualmente, estamos usando esse uso de contador composable para gerenciar todas as funcionalidades deste contador. Portanto, temos todos os nossos dados e métodos calculados propriedade aqui. Em vez disso, vamos usar penny F2 configura o gerenciamento de estado para este contador. Primeiro de tudo, vamos remover esse uso council composable desta página inicial e toda a funcionalidade dinâmica. Vamos pular para a visualização de pontos da vista inicial na pasta de visualizações irá rolar até nossas importações, basta remover nosso contador de uso composable. E, em seguida, vamos rolar para cima e remover toda a funcionalidade dinâmica. Então, neste h3 em que estamos exibindo nosso título, vamos substituir as chaves duplas com título codificado. E vamos remover todos esses manipuladores de cliques de nossos botões onde nosso conselheiro está sendo exibido nesse intervalo. Menos substitua isso por apenas 0 e onde diz descontos que são ímpares ou pares. Vamos selecionar as chaves encaracoladas e vamos apenas puxar barra ímpar mesmo por enquanto. Então esse impulso, na verdade, vou dividir os atributos sobre isso. Vamos remover este modelo V por enquanto. Acho que isso é tudo. Temos um erro aqui. Usar conselheiro não está definido. Vamos rolar para baixo até nossa seção de script. Esse erro ocorre porque estamos tentando extrair coisas do nosso contador composable dos EUA que não estavam mais importando. Vamos remover tudo isso também. Salve isso, atualize. E agora removemos todas as funcionalidades dinâmicas desta página. Isso tudo é apenas marcar agora, oh, parece puxar alguns tipos de ataques lá em vez do título da palavra. Então, vou consertar isso e salvá-lo. Vamos adicionar algumas propriedades de estado para o nosso contador e o título do nosso conselheiro. Vamos pular para o centavo um arquivo de armazenamento, que foi criado quando geramos o projeto já é chamado de contador. Então, podemos deixar o nome como ele está. E novamente, isso é apenas coincidência. Esta loja não foi gerada com base em nenhum dos nossos códigos. Foi gerado quando criamos o projeto pela primeira vez. Por enquanto, vou remover os leilões e nos pegar e apenas focar no estado removerá essa propriedade do estado também. Não vamos uma propriedade estadual para o nosso balcão. Vou chamar essa contagem, defini-la como 0 por padrão. Muita propriedade para o nosso contador. E vamos chamar esse título. E vamos apenas definir isso para o meu contra-título. Salve isso. Agora podemos usar essas propriedades de estado em qualquer lugar dentro do nosso aplicativo. Vamos ver se podemos usá-los nesta página inicial. 56. Pina - Estado - Parte 2: Para usar nossa loja de balcão, precisamos importá-la e nós a importamos usando esse nome de método aqui, use o contador de armazenamento. Então, vamos pular para a vista de pontos da vista inicial, onde está toda a nossa marcação de cálcio. Role para baixo até a seção de impulso. E vamos importar, usar a loja de balcão. E eu escrevi isso errado. Você usa porta consciente não está certa. Vamos apenas verificar. Consegui o nome certo. Use a loja do conselho do conselho de barra de lojas de barras de aplicativos. Digamos que acesse a loja, precisamos atribuí-la a uma constante ou a uma variável. Vou rolar para baixo até o fundo aqui. Vou colocar nosso balde de comentários do conselho. Podemos apenas fazer const e dar um nome a ele. Vamos chamá-lo de contador, definir isso igual a usar contador, armazenar parênteses. E agora devemos poder acessar tudo o que está em nossa loja do conselho usando esse custo do contador. Vou salvar isso. E agora devemos realmente poder ver nossa loja de balcão em nossa visualização DevTools, queremos abrir as ferramentas de desenvolvimento do Chrome acessando Exibir Ferramentas do Desenvolvedor ou usando o atalho de teclado. Em seguida, podemos clicar nesta pequena seta e escolher Exibir. Recarregue a página por algum motivo, veja DevTools não está funcionando. Vou tentar sair Chrome e reiniciá-lo, ver se isso corrige. É. Acabei de saltar para o terminal. Comando. Clique neste link para abrir o aplicativo, abrir o DevTools, clique na seta e vá para a exibição. Parece estar funcionando. Agora, vamos apenas esticar isso um pouco. Estique isso para fora. Se formos a este pequeno ícone aqui e Penny Are, podemos ver nossa loja de balcão. E se clicarmos nisso, poderemos ver as propriedades de estado nele. Você poderia dizer contagem e podemos dizer título. Agora vamos ver se podemos usar essa propriedade de estado de contagem em nossa página. Vou mostrar isso aqui de volta. Mova isso um pouco. Nós atribuímos nossa loja para essa constante do contador. Portanto, para acessar essas contagens de propriedade de dados, que é um estado R, devemos ser capazes de apenas fazer contagem de pontos de contador. Então, vamos rolar até onde nosso contador está. Selecione este 0, chaves duplas contadores contam, salve isso, recarregue. Ainda podemos ver 0 lá e podemos realmente modificar nossas propriedades de estado usando as ferramentas centavo a dev dentro das ferramentas view dev. Assim, podemos clicar neste lápis e inserir um número. E vemos essa atualização. Podemos usar esses pequenos botões de mais e menos também para mudar o contador. Nem todos parecem estar conectados corretamente. E se saltarmos para nossa loja de balcão e alterarmos o valor, salvarmos essa recarga, veremos que agora está definida como dez. Vamos mudar isso de volta para 0 e salvá-lo. Por algum motivo, o recarregamento a quente, parece não estar funcionando no momento. Agora há uma página no centavo, um site que informa como habilitá-lo. E já tentei seguir isso antes e não consegui fazê-lo funcionar, mas vamos ter muito Go, já que ele pode ter sido atualizado. Vou apenas no Google Penny saltar para Penny app.vue js.org. Ir para o guia, saltará para a substituição do módulo. Diz blá, blá, blá. Você precisa adicionar esse trecho de código ao lado de qualquer declaração da loja. Digamos que você tenha três lojas de GIS, carrinho JS e cobrar JS, você terá que adicionar um adaptar isso após a criação da definição da loja. Certifique-se de passar a definição correta da loja. Use neste caso, vamos apenas copiar esse trecho aqui e vamos colá-lo depois que eu usar o contador. Acho que precisamos substituir esse usuário usar o contador de armazenamento. Cole isso e salve essa recarga. Temos um erro aqui, ReferenceError não capturado aceitar atualização HTML não está definida. Vamos voltar para o exemplo. Precisamos importar isso, aceitar atualização HTML da opinião também. Então eu vou copiar isso e tentar. Salve essa recarga. Vamos ver se o recarregamento a quente está funcionando agora eu vou mudar o conselheiro para dez, salvar isso e ainda não parece estar funcionando. Talvez precisemos matar esse processo e iniciá-lo novamente. Vou acabar com o processo com controle e dizer run npm, executar dev, recarregar o aplicativo. Vamos mudar isso para 100, e ele ainda não parece estar funcionando. Espero que isso seja corrigido em algum momento. E se eu encontrar uma correção, muitos vídeos para o curso, mas por enquanto, vou remover esse código que acabamos de começar. E como parece não estar funcionando. Além disso, se você souber como fazê-lo funcionar e deixe uma mensagem com esta palestra. Então, vamos remover isso, exceto o HMM, atualizar também. Contador de volta para 0. Por enquanto, vamos ter que continuar recarregando sempre que fizermos alterações em nossa loja. Agora vamos ligar o título do contador. Vamos voltar para a visualização de pontos da visualização inicial, selecionar este título codificado de texto, excluir que são chaves duplas. E novamente, para acessar nossa loja, podemos usar o contador. E, em seguida, para acessar a propriedade title, podemos apenas fazer o título do ponto, salvar isso. E podemos ver o título do meu conselheiro na página. E se mudarmos isso nas ferramentas de desenvolvimento aqui, veremos que ele seja atualizado também. E isso está funcionando. Vamos procurar essa entrada também, que está aqui. Vamos apenas adicionar modelo V e defini-lo para a mesma coisa, contagens, contagem de pontos. Salve isso. Na verdade, não, isso deve ser definido para o título. Então, queremos o título do ponto do conselheiro, salve isso. Se atualizarmos esse título na entrada, diremos atualizar neste título também. E também o vemos atualizar no DevTools. 57. Pina - Ações: Vamos adicionar algumas ações por meio da nossa loja de opiniões. Na opinião, as ações da loja são basicamente apenas métodos que podem acessar as propriedades em nosso estado e modificá-las. Portanto, as ações são o equivalente aos objetos de métodos na API de opções ou qualquer método que modifique seus dados reativos na API de composição, só precisamos adicionar um objeto após o estado chamadas ações. Opa, isso deve ser leilões. E podemos colocar todas as nossas ações aqui. Então, vamos criar uma ação para aumentar nosso contador. Então eu criarei um método aqui chamado conselheiro de aumento para acessar propriedades em nosso estado, podemos apenas usar o bit de palavra-chave, como fizemos na API Opções para acessar nossas propriedades de dados. Então, podemos apenas fazer esse contador de pontos mais, mais. Esse oxigênio deve ser bom para ir. Então, vamos adicionar uma vírgula, duplicar essa ação, livrar-se dessa vírgula. E vamos configurar uma ação para diminuir o contador chamado contador de diminuição, vamos apenas dizer este contador de pontos menos menos. E acabei de perceber que isso deveria ser contado, não contador. Então, vou mudar isso para contar e alterar isso para contar também. Salve isso. E agora devemos ser capazes usar essas ações. Então, vamos voltar para a vista de pontos de vista inteira, e vamos pular para este primeiro botão. Depois do contador, tenho permissão para clicar no manipulador. Então, clique no aplicativo é igual. Para acessar a loja, podemos usar o contador, que é o nome da constante que usamos aqui. E então, para acessar a ação, podemos apenas fazer pontos e, em seguida, o nome da ação. Então aumente o contador, salve isso. Vamos ver se isso está funcionando. Acho que talvez precisemos adicionar parênteses no final aqui. Então, vamos tentar isso, salvar isso e temos alguns erros aqui. Talvez precisemos recarregar. Vamos tentar isso novamente. Vamos ver se precisamos adicionar esses parênteses. Na verdade, vou salvar isso. Recarregar. Na verdade, não precisamos adicionar os parênteses. Vamos pular para o botão menos que está diretamente antes do balcão. E vamos apenas copiar esse manipulador de cliques. Cole-o nesse botão, mudará isso para Contador de diminuição de pontos do conselheiro , salve isso. Ambos os botões estão funcionando agora. E também podemos enviar parâmetros para nossas ações também. Então, se eu apenas pular de volta para o counter dot js, se quisermos que eles recebam parâmetros, então podemos adicionar um nome para esse parâmetro aqui. Então, vamos chamá-lo de valor. Digamos que queremos aumentar ou diminuir o contador por esse valor que estamos passando. Para aumentá-lo por esse parâmetro, podemos apenas fazer essa contagem de pontos mais igual a quantidade. E então, para diminuir, ele só fará essa contagem de pontos menos igual a quantidade. Salve isso. Se quisermos passar um parâmetro, você acabou de parar parênteses no final do nome do método para este botão, ele o diminuirá em um. E então, para isso, o Boltzmann diminuirá em um menos também conecte os outros botões também, este e este fará que isso diminua em dois. Aumente em dois. Copiarei este manipulador de cliques do botão de mais, cole-o neste. Vamos apenas mudar o valor que estamos passando para dois. Em seguida, faremos o mesmo para os outros pontos de redução, copiaremos o manipulador de cliques, colá-lo aqui, alterar o número para dois. E digamos que agora espero que tudo sobre tensões esteja funcionando. Sim, podemos diminuí-lo em um e aumentá-lo em um. Esses não estão funcionando. Talvez você precise recarregar novamente. Sim, isso não está funcionando. Podemos aumentar em dois e diminuir em dois também. E também podemos ver os dados mudando no DevTools também. 58. Pinia - Getters: Getters nos permitem obter um valor do nosso estado e , em seguida, modificá-lo de alguma forma ou gerar algo com base nesse valor, e depois devolvê-lo e disponibilizá-lo para qualquer componente que esteja usando esta loja, você pode pensar em nos obtém como o equivalente de gerenciamento de estado das propriedades computadas. Portanto, os valores de retorno dos getters são cache e atualizados somente sempre que suas dependências mudam, sempre que as propriedades de estado que os getters estão usando foram alteradas. Então, vamos criar um getter para dividir o ímpar ou mesmo aqui, que atualmente é codificado com base no valor do contador, esta propriedade count. Para começar a adicionar devedores, só precisamos de outro objeto chamado getters. A propósito, não importa em que ordem colocamos isso. Se preferir, você pode colocar os getters após o estado e depois leilões na parte inferior. Isso realmente não importa. Mas, de qualquer forma, vamos adicionar um get-up que funcione se esse número é ímpar ou par, e depois retorna os textos ímpares ou pares. Então, criaremos um getter chamado ímpar ou par. Esta deve ser uma propriedade que definimos para um método como este para acessar nosso estado, podemos simplesmente passar o estado como um parâmetro neste método. Então, para pegar essa propriedade count que está no estado, podemos apenas fazer a contagem de pontos do estado. Queremos descobrir se isso é estranho ou par. Então, novamente, usaremos o operador restante para fazer isso. Isso só pode ser feito se a contagem de pontos do estado restante dois for igual a 0. Em outras palavras, se dividirmos a contagem por dois e obtivermos o restante, e esse restante for igual a 0, então sabemos que o número é mesmo para que possamos retornar o texto, mesmo. Caso contrário, podemos retornar a autonomia do texto. É importante notar que , para que possamos trabalhar, eles precisam retornar um valor. Então, vamos salvar essa recarga. E devemos ser capazes de usar isso em nossa página. Então, vamos pular para o nosso ponto de vista inicial Vue. Livre-se dessa barra estranha. Até os textos são chaves duplas e encaracoladas. Podemos apenas fazer o contra-ponto ímpar ou par. Salve isso. E podemos dizer que o contador é par, nós o mudamos para um. Vemos que o contador é estranho. Se também estamos olhando para ferramentas de desenvolvimento, podemos ver nossos getters aqui também, e podemos ver o valor dessa mudança também. Uma outra vantagem de centavos sobre alguns x, que eu não mencionei anteriormente, é que não precisamos especificar ações de estado dos getters quando as usamos em nosso modelo ou em nossa seção de scripts. Então, em uma view x up, teríamos que fazer o estado do ponto do conselheiro, título do ponto. E então, quando acionamos uma ação, teríamos que fazer ação de contra-ponto, diminuir o conselho, etc. Na opinião, a Europa, não precisamos especificar isso, o que torna nosso código um pouco menos detalhado. 59. Pina - Use nossa loja em qualquer lugar: Agora que nossa loja de opiniões está configurada, podemos usar as ações estaduais e nos levar a qualquer lugar em nosso aplicativo. Vamos usar esta loja em nossa página de postagens para este contador. Este contador está usando o uso contador composto que criamos anteriormente. Então, vamos remover isso desta página. E toda a funcionalidade dinâmica e o gancho dos pontos não são muito novos. Penny conta ou loja. Vamos pular para esta página. exibição de visualizações e postagens ponto de exibição de visualizações e postagens Vue removerá esta importação do contador dos EUA, composable. E também remova esse const onde quer que pegue as coisas que estamos usando do composable. E então vou pular para o modelo. Vamos substituir essas contagens de pontos de dados do contador pelo incontável em nossa loja. Então, contagem de pontos do contador. E vamos substituir esse método aqui, aumentar contra o aumento da ação do contador que está em nossa loja. Podemos simplesmente mudar isso para contador, ponto aumentado contador. Como o método tem o mesmo nome. Esta classe que estava cuspindo com base no fato de o número ser ímpar ou par, podemos simplesmente substituir esse ímpar ou mesmo pelo getter que está em nossa loja. Então contador ponto ímpar ou par. Então, vamos mudar que conta ponto ímpar ou par, salvar essa recarga e temos um erro aqui. O que está acontecendo? O contador de propriedades é acesso durante a renderização mas não foi definido na instância. Vamos rolar para baixo. Esquecemos de importar nossa loja. Vamos pular para o ponto de vista inicial Vue. Copie esta linha de entrada onde estamos importando o banco, cole-o na exibição de postagens, vista de pontos. E então também precisamos atribuir isso a uma variável. Então eu vou copiar isso da pontos da vista inicial, colar isso aqui. Vou apenas remover esse comentário, salvá-lo e devemos estar prontos para ir. Então, vamos recarregar. O botão agora está funcionando. Podemos dizer que nas ferramentas de desenvolvimento está modificando os inúmeros em nossa loja de opinião porque nossa loja de opinião é global. Eles. Quando saltamos para a página inicial, devemos ver que a contagem está definida como oito. É. Se aumentarmos o contador aqui e saltarmos de volta para a página de postagens, podemos ver que o valor do contador está sempre atualizado , independentemente de onde estamos dentro do nosso aplicativo. 60. Projeto do curso: Noteballs [Módulo 13]: Vamos passar o resto deste curso fazendo tudo o que aprendemos para criar esse aplicativo de anotações do mundo real chamado Nope balls, criando isso, mas permita-nos levar todos os nossos novos conhecimento dos fundamentos da API de composição e solidificar esse conhecimento com a criação de um mundo real do zero. Neste aplicativo, podemos exibir uma lista de notas. Cada nó tem a nota sobre o número de caracteres e um botão de edição e exclusão. Podemos adicionar uma nova nota. Podemos editar uma nota, salvá-la e também podemos excluir uma nota com esse modal de conformação. E também temos um cabeçalho com links em duas páginas, notas e estatísticas. E temos esta página Estatísticas onde exibimos estatísticas relacionadas às nossas notas, incluindo o número de notas que temos sobre o número total de caracteres de todas as nossas notas. Também parecerá apresentável como você pode ver usando a biblioteca CSS do bowler. E também será responsivo também. No desktop, temos esses links para nossas duas páginas, mas se reduzirmos isso, podemos ver todos os elementos dimensionados para dispositivos móveis e nossos links no cabeçalho mudaram para esse ícone um pouco maior. E quando clicamos nisso, podemos ver os links para nossas duas páginas. Este aplicativo usará quase todos os conceitos que aprendemos anteriormente no curso, incluindo o roteador de visualização nas rotas dos EUA e o uso do roteador composable. Desta vez, vamos realmente instalar o Vue Router e configurar tudo do zero, usaremos dados reativos, incluindo refs e objetos reativos, usarão métodos calculados propriedades, e os relógios usarão componentes filho, incluindo props, emits e atualização do valor do modelo, usará refs de modelo no composable, incluindo composable personalizado em um composable dentre os poucos use biblioteca vai usar diretivas e ganchos de ciclo de vida. E vamos configurar todo o gerenciamento estadual do nosso aplicativo usando moedas de um centavo. Embora desta vez vamos realmente instalar o penny a, configure nosso centavo uma loja completamente do zero. E é claro que também adicionaremos ações estatais e um monte de ganhadores à nossa loja centavo. 61. Crie projeto: Vamos criar uma nova visão, três projetos para nossas notas. Vamos pular para o site da V3. Vou procurar por V3 brincou com v3 dot Vue js.org. E mais cedo no curso, eu disse que os documentos estão prestes a ser massivamente renovados e eu tive que mudar o URL para chegar aos novos patos. Mas parece que os novos documentos e nossas vidas, podemos simplesmente pular para instalar. Role para baixo. Mais uma vez, não precisamos ter JS instalado. O que você provavelmente já tem isso instalado neste momento. Vamos criar um novo projeto de exibição com esse comando. Copie isso, pule para o meu terminal e VS Code e um gamete pode alternar isso com controle e tick de volta. E eu vou me certificar de que você está na pasta onde você armazena seus projetos. Você definitivamente não quer executar isso na pasta de projetos anteriores, se for onde você está, vou colar isso e iniciá-lo. Digitarei y para concordar em instalar, Criar visualização para o nome do projeto e a pasta do projeto. Vou usar a API de composição view dash. Bolas não. Podemos usar qualquer nome de pasta que você goste. Vou escolher o nó para todas as opções. Não vamos instalar rotas Vue até este momento porque ele vai instalar isso do zero, em vez disso tudo do zero. Então, não, e novamente com centavos, vamos definir tudo do zero. Então, vou escolher Não, não, não. Você pode considerar usar yes Lynn em seus próprios projetos para ajudá-lo a garantir a qualidade do código. Mas por simplicidade, vou escolher uma nota para isso. E temos algumas etapas de lançamento aqui. Então, só precisamos fazer o cd na pasta e executar o npm install para instalar as dependências e, em seguida, executar npm run dev. E posso ver que a pasta é criada aqui, API de composição não bolas. Então, vou arrastar isso para o VS Code. E, em seguida, abra o terminal e execute o npm install. Em seguida, o npm execute o dev para iniciá-lo. Agora podemos Command e clicar neste link e podemos ver o aplicativo básico em execução no navegador. Antes de começarmos, vamos mudar o nome que aparece na parte superior lá. Então, vou abrir o Explorer e ir para index.html. Acabei de mudar o texto nessas etiquetas de título para anotar bolas. Salve isso, e agora estamos prontos para começar a criar bolas não. 62. Router - Instale e configuração: Embora haja uma opção na ferramenta de compilação que usamos apenas para adicionar o Vue Router ao nosso projeto automaticamente. É bom saber como fazer isso manualmente, caso você tenha algum para adicionar o Vue Router a uma exibição existente. Três projetos que ainda não o têm configurado. Vamos adicionar o Vue Router ao nosso projeto e configurar tudo. Então, vamos pular para o nosso terminal e matar o processo de morte com controle e dizer instalar o Vue Router. Podemos executar o npm install Vue Router four para obter a versão mais recente do seu roteador que agora está instalada. Podemos lançar nosso projeto novamente com npm run dev, fechar o terminal. Em todo o roteador para nossa API precisa pular a origem e o main.js. Não podemos ser roteados para nosso aplicativo importando o método Create Router do Vue Router e adicioná-lo a isso cria uma cadeia com algumas opções. Primeiro de tudo, após esta primeira linha, precisamos importar Create Router do roteador. E agora podemos usar esse método ou criar rotas para configurar nosso roteador. Precisamos atribuir isso a uma constante. Então, criaremos uma constante chamada roteador e atribuiremos isso a isso. Queremos passar um objetivo com todas as nossas opções de roteador. A primeira opção que precisamos adicionar é o modo histórico. Podemos definir isso para criar histórico da Web ou criar histórico de hash da web. Agora, criar histórico da Web usará URLs reais no navegador quando navegarmos por todas as páginas. Por exemplo, se fôssemos para uma página Sobre , o caminho seria apenas uma barra sobre. Considerando que, com o histórico de hash da web , diremos barra, hash, e depois sobre quando vamos para nossa página sobre, e eu vou usar o histórico de hash da web aqui, porque quando estamos usando esse modo, não precisamos de nenhuma configuração de servidor extravagante para executar nosso aplicativo se decidirmos implantá-lo em um servidor, vamos definir essa propriedade de histórico para criar histórico de hash da web. Precisamos importar isso do Vue Router VS Code é adicionado automaticamente para mim aqui. Mas se o seu não for injusto, adicione-o a esse impulso. A próxima opção que precisamos adicionar são nossas rotas. Criamos uma propriedade chamada de configuração de rotas para uma matriz. E podemos configurar todas as nossas rotas aqui. Mas antes de fazer isso, vamos adicionar essa instância do roteador ao nosso aplicativo. Então, depois disso, crie nosso aplicativo, podemos adicionar o método dos EUA a este ponto de cadeia, use parênteses, e podemos simplesmente passar nessa constante do roteador. Vou dividir isso em várias linhas e salvar isso. Vamos nos certificar de que não estamos vendo nenhum erro. Vou recarregar. E acho que essa flecha pode ser só porque ainda não resolvemos nenhuma rota. Vamos fazer isso em seguida. 63. Router - Adicione algumas rotas: Vamos configurar algumas rotas para o nosso aplicativo. E nosso aplicativo terá uma visualização de notas, nossa página e uma visualização de estatísticas. Vamos configurar uma rota para nossa visualização de anotações primeiro. Bem, em primeiro lugar, vamos precisar de um componente que possamos usar para essa visualização de notas. Vamos voltar para o Explorador de Arquivos e clicaremos com o botão direito do mouse na pasta de origem e criaremos uma nova pasta chamada views. Isso não precisa ser chamado de visualizações. Você poderia chamá-lo de páginas se quiser, mas eu vou chamá-lo de visualizações. E vamos criar um novo componente lá, e chamaremos isso de notas de visualização. Não visualize tags de modelo. Por enquanto, vou começar uma div com uma classe de notas. Dentro disso, muitos H um que apenas diz notas e salvam isso. E agora podemos usar esse componente para nossa visualização de notas. Vamos pular para main.js e adicionar uma rota para nossa visualização de anotações. Para cada rota em nosso aplicativo, precisamos adicionar um objeto com algumas opções. Primeiro de tudo, precisamos da opção caminho. Isso determinará qual caminho nos levará a essa rota. Vou definir o caminho para seguir a visualização de notas, o que significa que esta será a rota raiz do nosso aplicativo quando a primeira visita estiver pronta, esta é a rota que irá para. Também precisamos adicionar uma propriedade name. Definirei isso como notas sobre esta propriedade name torna mais fácil para nós enviar o usuário para uma rota específica programaticamente. E, finalmente, precisamos adicionar a propriedade de componente que acabamos de definir para o componente que queremos usar para essa rota. Então, antes de tudo, precisamos importar nosso componente. Portanto, importaremos notas de visualização de visualizações de barra, vista de pontos de notas de barra. Agora, em compilações de visualização anteriores que usavam o Webpack, não precisávamos colocar a visualização de pontos aqui, mas quando estamos usando o VT, que somos agora que precisamos adotar a visualização. E também isso no símbolo aqui. Este é apenas um alias que se refere a essa pasta de origem. E esse alias está sendo definido neste arquivo js do ponto de configuração vt dot. Podemos ver isso aqui. Você também pode adicionar sua própria introdução de alias a pastas diferentes, se quiser. Mas de qualquer forma, vamos voltar para main.js e agora podemos definir o componente para essa rota. Vamos definir isso para ver as notas. Vamos salvar isso e recarregar. Ainda temos um erro aqui. E acabei de descobrir qual é o problema quando definimos o histórico para criar o histórico de hash da web, isso precisa ser uma chamada de método. Só precisamos adicionar parênteses ao final disso, salvo se o aplicativo agora está funcionando novamente. No entanto, não podemos ver essa visualização de notas que acabamos de criar no navegador. E isso porque precisamos adicionar um componente de visualização de roteador ao nosso aplicativo, ao nosso componente raiz app.vue. E faremos isso em um minuto. Mas antes de fazermos isso, vamos apenas configurar uma rota para nossa página de estatísticas. Então, vamos voltar para a pasta de visualizações. Notas de visualização duplicadas, vista de pontos. Vamos chamar isso de visualização de pontos de estatísticas. Vou mudar a aula no dia de dois começos. Alteraremos o texto no cabeçalho dois começa também. Salve isso. Salte de volta para main.js. E vamos adicionar uma vírgula após essa rota e duplicá-la. A propósito, eu fiz isso selecionando esses textos e pressionando Alt Shift e para baixo, o atalho pode ser diferente em sua plataforma. Agora vamos nos livrar dessa vírgula aqui. Quase defina o caminho para estatísticas de barra para que, quando vamos para a barra, chegamos às estatísticas. Ele também mudou o nome para paradas. E agora precisamos definir o componente para pedir a visualização de pontos, mas primeiro precisamos importá-lo. Então, vou duplicar essa linha de notas de visualização e importaremos estatísticas de exibição da barra de arte, visualização pontos de estatísticas e salvaremos isso. Agora só precisamos alterar esse componente para visualizar estatísticas, digamos isso, mas ainda não podemos ver na visualização Notas na página se formos para a barra de caminho e não pudermos ver a visualização de estatísticas se formos as estatísticas de barra de caminho. E isso porque precisamos adicionar um componente de visualização de roteador ao nosso aplicativo. Vamos fazer isso em seguida. 64. Adicione RouterView e navegação: Deixe-me ir para a barra do caminho. Não vemos o componente de anotações com este cabeçalho com as notas de texto. E isso porque precisamos adicionar um componente de visualização de roteador ao nosso aplicativo é o componente de visualização do roteador que determina onde nossas rotas serão exibidas. Então, vamos pular para nossa fonte de componente raiz, app.vue. Na verdade, vou remover esta seção de script, remover tudo dentro do modelo e remover a tag de estilo e todos os estilos também. Salve isso. E agora também podemos excluir todos os componentes na pasta de componentes de origem. Selecionarei tudo aqui, clique com o botão direito do mouse e excluirei. Vemos uma seta, mas se recarregarmos, o erro desaparecerá. Agora, para exibir nossas rotas, só precisamos adicionar um componente de visualização de roteador. E podemos fazer isso no caso do painel como esta visualização do roteador. Podemos fazer isso no caso Pascal, o que vou fazer. Então, a visualização do roteador, salve isso. E agora podemos ver nossa rota de notas na página. E se formos para as estatísticas de barra de caminho, podemos ver nossa visualização de estatísticas. Agora, usar a barra de endereços para navegar não é muito divertido. Vamos adicionar alguns componentes de link do roteador à nossa página para que possamos navegar acima desse componente de visualização do roteador. Vou adicionar um componente de link de roteador dentro dele, colocarei as notas de texto e depois duplicarei isso. Neste, colocaremos as estatísticas de texto para determinar para onde esses links de roteador irão. Podemos apenas adicionar um dois prop e configurá-lo para o caminho que queremos ir longe demais, a visualização de notas, podemos simplesmente definir isso para barra. E então, para a visualização de estatísticas, podemos simplesmente definir isso para barra de estatísticas. Vamos salvar isso. Vamos apenas adicionar espaço após o primeiro e um cano e depois outro espaço. Digamos que agora podemos navegar em nosso aplicativo. 65. Router - Tentando seu encontro: Nosso roteador agora está configurado e funciona. Mas antes de seguirmos em frente, vamos arrumar nosso código um pouco. Então, antes de tudo, vou extrair todo o código de configuração do roteador em seu próprio arquivo na pasta de origem. Vou criar uma nova pasta chamada roteador. Lá dentro. Vou criar um novo arquivo chamado index.js. Vamos voltar para main.js. Vou usar uma seleção múltipla mantendo pressionada a tecla Alt. Embora o atalho possa ser diferente na sua plataforma, vou selecionar todo esse roteador, const as duas entradas para nossa visualização de notas e visualização de estatísticas. Esta linha onde estamos importando o Create Router e ótimos métodos de histórico de hash da web do Vue Router. Vou cortar muito e arrumar isso um pouco. E, em seguida, vá para index.js em nossa pasta do roteador, cole todo esse código e começaremos uma linha após nossas entradas. E agora queremos exportar essa instância do roteador para disponibilizá-la para outros arquivos. Então, no final, podemos exportar o roteador padrão e salvá-lo. E agora, se saltarmos de volta para main.js, podemos importar essa instância do roteador adicionando roteador de importação do roteador de barra. E, na verdade, não precisamos adicionar barra index.js quando usamos o nome do arquivo index.js, ele sempre procurará esse arquivo automaticamente. Então, podemos simplesmente importar o roteador do roteador de barra. E agora, quando disparamos o roteador de uso, estamos usando a instância do roteador do arquivo index.js na pasta do roteador. Vamos salvar isso e ver se tudo ainda está funcionando. Tudo ainda está funcionando. Mais uma coisa, vou pular para index.js e vou colocar todas essas rotas em sua antiga constante. Então, vou configurar uma constante chamada rotas. Defina isso igual a uma matriz. Então eu vou cozinhar esses dois objetos, colá-los aqui. E agora podemos simplesmente definir esta propriedade de rotas, duas rotas. Ou como esses nomes são os mesmos, podemos simplesmente abreviar isso apenas para rotas. Então, vamos salvar isso, certifique-se de que ele ainda esteja funcionando. No entanto. Ainda está funcionando bem agora nós o vinculamos ao arquivo main.js. Movi todo o código relacionado ao nosso roteador para seu próprio arquivo. 66. Bulma e Design - Instale o Bulma [Módulo 14]: Para nos ajudar a tornar nossa perspectiva bonita, vamos usar a biblioteca CSS Bulmer. Vou pular para Walmart.io. Agora, este não é um curso de CSS, então não vou me concentrar em bulla e CSS até março. Simplesmente o usamos para nos ajudar a tornar nossa perspectiva bonita sem ter que gastar tempo escrevendo excesso de CSS. E dessa forma podemos focar puramente no Vue.js três e na API de composição. Além disso, não estou necessariamente sugerindo que você use o Bulmer para seus projetos. Você deve fazer uma escolha informada com base nas necessidades de seus projetos individuais. No entanto, acredito que o bombardeiro é atualmente o terceiro framework CSS mais popular após o bootstrap, tailwind CSS. No entanto, escolhi bola para este projeto porque é a estrutura CSS mais fácil de começar. E ele tem todos os componentes que vamos precisar para este projeto. Se eu pular para documentação e componentes, temos esse componente de cartão que vamos usar, esse componente Navbar que vamos usar, o componente modal. Agora vamos usar, tem um monte de componentes de farm que vamos usar como essa entrada. E também tem um bom componente de botão que vamos usar também. Vamos instalar a bala em nosso projeto. Vou pular para a visão geral e, em seguida, começar a rolar para baixo. E há algumas maneiras de instalá-lo. Podemos instalá-lo usando um link CDN onde ele será carregado externamente. Podemos baixá-lo do GitHub. Podemos instalar o pacote npm. É assim que vou fazer isso. Então, precisamos executar o npm install Puma. Então, vamos copiar isso. Abra nosso terminal, mate o processo de morte e execute npm install bulla. E isso está instalado. E se saltarmos para nossa pasta de módulos de nó, podemos dizer que Bulmer está aqui. E se saltarmos para a pasta CSS, podemos dizer arquivos CSS bola. Vou usar a versão minificada, Bohmer dot main.css. O que também poderíamos usar a versão minificada do ponto CSS. Vou clicar com o botão direito do mouse no bullet dot main.css. Clique em Copiar caminho que vou pular para app.vue. Vou adicionar uma tag de estilo para importar esse arquivo CSS. Vou adicionar em Importar. Então eu vou colar nesse caminho. Temos o caminho completo no meu computador aqui. Só precisamos do caminho desta pasta de boliche aqui. Então, removerei tudo antes dessa pasta de bala. Precisamos adicionar um ponto e vírgula no final. Digamos que precisamos relançar nosso aplicativo. Vamos executar npm, executar dev. Volte para o nosso aplicativo. Podemos ver que nossos estilos já mudaram um pouco, mas apenas para garantir que Bulmer esteja funcionando, vamos adicionar uma classe a cada um dos nossos componentes de link de roteador aqui do botão. E isso deve dar a isso um bom estilo de botão. Salve isso. Podemos ver alguns pequenos botões bonitos agora, e agora podemos começar a usar o Bohmer para fazer Kiara ficar linda. 67. Barra de Nav - Design: Vamos adicionar um bar de navegação bonito e bonito ao nosso aplicativo. Agora, antes de tudo, vamos apenas criar um componente para ele que será importado para app.vue. E, por algum motivo, minha pasta de componentes desapareceu. Mas você deve ter uma pasta de componentes aqui. Mas vou criar esses componentes. Dentro disso. Vou criar uma pasta chamada Layout. Não gosto da forma como os grupos VS Code são pastas juntos assim por padrão. Então, eu só vou consertar. Eu entro em código, preferências e configurações, e vou procurar por compactos. Poderíamos desmarcar essa opção de pastas de compilação. E agora temos um sistema de pastas normal aqui. Dentro da pasta de layout. Vou criar um arquivo chamado navbar dot view. Por enquanto, vamos começar as tags de modelo. Basta adicionar uma div com minha barra de navegação, o texto. Agora vamos pular para app.vue e importar esses scripts de componente Tags para cima. Vou adicionar um comentário em bloco aqui que diz apenas importações. Em seguida, importaremos navbar de componentes de barra barra de layout de barra suficiente vista de ponto de barra. Eu uso esses grandes comentários para dividir meu código em seções. Acabei de descobrir que isso torna muito mais fácil para mim digitalizar meu código. Bem, isso é totalmente opcional. Você não precisa adicionar esses comentários se não quiser. Agora vamos colar esse componente Navbar na página. Vou me livrar dessas rotas de visão de pernas por enquanto e apenas emitirei nossa barra de navegação. Vamos salvar isso. E podemos dizer minha barra de navegação na página. Agora vamos pular para o site da calvície e vamos para Componentes. Navbar, role para baixo, estique isso um pouco, e vamos copiar este exemplo aqui para uma barra de navegação básica e depois vamos modificá-lo. Então, vou copiar todo esse código. Mova isso de volta e, em seguida, vamos pular para a visualização de pontos Navbar, colar tudo aqui, recuar e salvar. E agora podemos ver navbar. Vou apenas diminuir um pouco. Quero acabar com uma bela cor verde em vez de branco. E podemos fazer isso adicionando uma classe a esse elemento NEF quando dividir os atributos sobre isso usando a extensão de atributos HTML divididos na qual instalamos anteriormente. Muita classe de sucesso, salve isso. Agora temos uma bela Napa verde. E, novamente, não vou explicar todas essas classes de marcadores muito porque quero manter o foco na visualização e na API de composição o máximo possível. Mas você pode encontrar todas essas aulas disponíveis no site. Por exemplo, para este menu suspenso da barra de navegação, duas cores mostram como adicionar todas essas cores diferentes aqui. 68. Barra de Nav - Navegação e Logotipo: Vamos personalizar essa barra de navegação. Primeiro de tudo, quero me livrar deste link Mais aqui com este menu suspenso. Vamos rolar para baixo a visualização Bardot suficiente e ver se conseguimos encontrar isso. Podemos ver esse mais link aqui. E podemos ver essa div com uma classe de navbar. Vamos desmoronar essa div, apenas se livrar dela. Salve isso e vemos isso desaparecer. Agora vamos mover esses dois links para o lado direito. Então, vou rolar para cima nesses dois links de itens da barra de navegação aqui. Eu vou cortá-los e vou me livrar deste bar dash stop Dip. Vou colar esses links nesta div final da barra de navegação, que os colocará à direita. Vamos colapsar esse mergulho dentro disso, não por item, e nos livrar disso. Vou colar nos links que cozinhamos antes e salvarei isso. Vamos fazer com que esses links duas anotações visualizem e nossa equipe. Só vou remover a segunda barra de laboratório I2. Agora, neste primeiro, vou mudar isso para um componente de link de roteador. Certifique-se de que alteramos as tags de abertura e fechamento que vou dividir os atributos sobre isso, alterar o texto para notas. Tenho muito a sustentar esse link do roteador, estabelecer a barra de caminho, que é onde nossos roteadores de notas. E, em seguida, selecionarei esse link do roteador, duplicá-lo. E mudaremos as duas prop para as estatísticas de barra de caminho, e mudaremos o texto para começa também e salvaremos isso. Agora temos links para nossa página de notas e paradas. Podemos ver esse título de namoro. Paula tem uma classe ativa, que não podemos para um desses itens da barra de navegação para que pareça ativa. Você pode ver esse link agora parece ativo. Esses componentes de link de rotas podem realmente adicionar uma classe ao link quando esse link for o link ativo. Se eu acabei de pegar essa classe, podemos simplesmente adicionar um suporte de classe de traço ativo, configurá-lo como. Esta classe é oitava, e também copiarei isso e colarei no link de estatísticas. Digamos que agora devemos ter lugares ativos em nossos links. E sim, está funcionando. Agora vamos substituir esta bomba por um logotipo por um título para o nosso aplicativo. Vou rolar até o topo e dentro desta div da marca navbar, temos esse ataque com uma classe de item navbar. Vou remover a imagem que está dentro dela e remover esse H ref. Não quero mudar essa tag em uma div porque não quero que isso seja um link. E então, dentro disso, vou apenas adicionar os textos bolas não. E salve isso para melhorar o estilo do texto aqui, vamos adicionar uma aula a este dia de tamanho quatro para torná-lo um pouco maior. E então uma classe de monoespaço familiar para lhe dar essa fonte de estilo monoespacial. E, novamente, você pode encontrar todas essas aulas no site do bolus, que é muito bem documentado. 69. Barra de Nav - Design responsivo e Menu: Agora, atualmente, o conteúdo dessa barra de navegação continuará se estendendo à medida que o navegador fica cada vez mais amplo, o que não parece muito bom, especialmente em telas realmente grandes. Temos o logotipo aqui e, em seguida, esses links aqui. Eu gostaria que tudo isso fosse restrito no meio depois de um certo ponto. E podemos usar elementos de contêiner desossados para fazer isso. Então, vou cercar tudo dentro do navbar com uma div, com uma classe de contêiner. Então, acabei de minimizar tudo o que está lá dentro. Muita div com uma classe de contêiner. E para garantir que ele restringe uma vez o navegador é mais amplo do que um certo número de pixels, podemos adicionar uma classe de marcas de traço, área de trabalho de traço. E essas aulas estão todas documentadas na bola da visão. E então eu vou mover essa marca navbar, esse menu navbar para aquela div e salvar isso. E agora podemos ver telas maiores. Tudo está restrito ao meio da página. Agora, se nossa visão ficar abaixo de 100 a quatro pixels, vemos os links de navegação desaparecerem e vemos isso, o antigo ícone do mendigo, mas nada acontece quando clicamos nele. Isso porque, para mostrar o menu móvel e alterar esse ícone em seu estado ativo, precisamos adicionar uma classe de ativo ao ícone do hambúrguer e ao menu de navegação também. Agora, tudo isso está documentado na página da barra de navegação. Mas só para demonstrar isso, vamos codificar essas classes. Agora, vou dividir os atributos nesta tag com uma classe de navbar grande. Vou adicionar uma classe de ativos e salvá-la. E podemos ver o ícone mudar para um X. E se rolarmos para baixo até esta div do menu da barra de navegação, também dividirei os atributos nisso muito da mesma classe para esta div. Isso economiza isso. E agora podemos ver o menu móvel aparecer. Vamos configurar um href para alternar essas classes. Quando clicamos no menu de hambúrguer, vou remover essas classes codificadas por enquanto da div do menu navbar na barra Navbar Berger uma tag, digamos que, a menos que pule para a nossa seção de script, o que não existem ainda. Então, vamos criá-lo Configuração de scripts. Muito comentário em bloco que diz navegação móvel. Quase configure uma constante chamada Show Mobile Nav. Defina isso igual a um href com um valor inicial de false. Isso é falso. Não mostraremos a soneca móvel quando for verdade, mostraremos e precisamos importar o método ref da exibição. Então, vou adicionar um comentário rápido aqui. As importações importarão ref da exibição. Salve isso. Agora vamos adicionar condicionalmente essas classes com base neste href. Então vamos pular para o ícone do hambúrguer primeiro, que está aqui com uma classe de hambúrguer navbar dash. Agora vamos vincular ao atributo class adicionando chaves de dois pontos e muitas classes, o traço ativo de A. Mas somente quando o Show Mobile Nav for verdadeiro. E então eu vou copiar isso e também adicioná-lo a esta div com uma classe de menu de traço navbar. E vou salvar isso. Agora, se saltarmos para o nosso ref e mudarmos o valor para true, agora podemos ver o navegador móvel na versão ativa do ícone do hambúrguer. Então, vamos definir isso de volta para false. Alterna o valor desta href. Quando clicamos no menu de hambúrguer, saltaremos para a tag de hambúrguer navbar e adicionar um manipulador de cliques. E quando clicarmos nisso, vamos definir o Show Mobile Nav igual ao oposto do Show Mobile Nav. Se for falso, vamos defini-lo como verdadeiro. E se for verdade, vamos defini-lo como false porque esta é uma tag que vai tentar ir a algum lugar quando clicarmos nela. Então, para impedir que isso aconteça, vou adicionar um modificador de prevenção de pontos. Isso impedirá o comportamento padrão do elemento em que estamos clicando no comportamento padrão de uma tag é ir para outra página. Vamos salvar isso e ver se isso está funcionando. Clique no botão e vemos a navegação móvel aparecer. Clique nele novamente e nós o vemos desaparecer. Agora, não gosto do fato de que nosso menu móvel está empurrando o conteúdo da nossa página para baixo. Veja como ele está empurrando esse título agora, eu preferiria que ele estivesse posicionado absolutamente sobre o topo da nossa página. Vamos adicionar um pouco de estilo para que isso aconteça. Vamos rolar para baixo até a parte inferior da tag de estilo. Muitas consultas de mídia aqui para mídia móvel, largura máxima de 1023 pixels porque é quando os estilos de navegação móvel entram quando os estilos de navegação móvel em ação quando reduzimos o navegador. Agora queremos direcionar o menu inferior suficiente, que é essa div com uma classe de menu navbar. Então, vou adicionar traço, menu de traço, configuração para posicionar absoluto e definir a esquerda para 0 e definir a largura para 100%. Salve esse clique no botão. O menu móvel agora está posicionado sobre a parte superior do nosso conteúdo em vez de empurrá-lo para baixo. 70. Páginas (Design): Antes de começarmos a trabalhar no design da nossa página de anotações, a página principal em nosso aplicativo. Primeiro de tudo, gostaria de restringir o conteúdo de todas as nossas páginas. Também adicionarei um pouco de preenchimento porque agora podemos ver o conteúdo de nossas páginas está no canto sem preenchimento. E também uma constante está sempre à esquerda. Independentemente de quão amplo seja o navegador, o que não parece muito bonito. Vou usar as mesmas classes que usamos para restringir o conteúdo em nosso contêiner Napa e são as classes de desktop do Mac. E para fazer isso, vou pular para o nosso aplicativo. Vue. Basta cercar nossa visão do roteador em uma div com essas classes. Portanto, o recipiente é o máximo de desktop. Basta mover a visualização do roteador para isso e salvá-la. Podemos dizer que nosso conteúdo agora está restrito. Bona tem algumas classes de preenchimento que podemos usar para adicionar um pouco de preenchimento em nossas páginas também. E tudo isso está documentado na bola deve citar muitas classes de Px dash T2 para adicionar algum preenchimento horizontal e, em seguida, um aglomerado de P, traço quatro para adicionar algum preenchimento vertical. Isso está bem agora em telas menores, mas em telas mais amplas, nosso logotipo não está alinhado com nosso conteúdo. Acho que ficaria melhor se isso estivesse alinhado. Então, vamos adicionar um pouco de preenchimento à nossa barra de navegação também. Vou apenas fazer a visualização de pontos navbar e, em seguida, esta div de contêiner que adicionamos. E muito PX clássico. Está parecendo muito bom. Agora, vamos dar a todas as nossas páginas uma cor de fundo sutil que combina com a cor da nossa barra de navegação. Então, vou pular para o Explorador de Arquivos e abrir o index.html. Vou adicionar uma classe ao nosso elemento HTML. Bomber tem tons de classes de cores que podemos usar, e todos estão documentados no lado palmar. Bem, eu vou usar a classe tem fundo, traço, sucesso, luz de traço. Salve isso. Agora temos essa bela cor verde social no fundo de todas as nossas páginas. 71. Notas (design): Agora vamos criar o design para nossas anotações usando o componente de cartão em bolus. Vou pular para o site de ousadia e ir para Componentes e cortar nossa tela cheia isso um segundo, não quero rolar para baixo este exemplo aqui, que tem esses botões na parte inferior, que podemos usar para adicionar a capacidade de editar e excluir uma nota. Vou copiar este exemplo aqui clicando em copiar. E então eu vou pular de volta para anotar bolas. Vamos adicionar isso à nossa visualização de anotações. Então, vamos para Exibições de código-fonte e visualizar as notas não são exibidas. E eu vou colar isso dentro desta div sobre o topo desta. Recuou um pouco e salve isso. E vou me livrar desse cabeçalho no topo. Então esse é esse elemento de cabeçalho aqui. Então, vamos nos livrar disso, salvar isso e vou habilitar a quebra de palavras por padrão. Então, vou para código, preferências e configurações, procurar por quebra de palavras e defini-lo ativado por padrão, isso é melhor. Agora vou me livrar de tudo dentro desta div com a classe de conteúdo. Então, livre-se disso. Cuspa um pouco de Lorem apenas digitando lorem e depois apertando Enter. Você deve ver esta abreviação do Emmet. Salve isso. Vou me livrar desse botão salvar porque só precisaremos de uma edição no botão de exclusão. Salve isso e vamos ver como isso ficará com vários cortes. Um truque rápido para fazer isso é apenas adicionar um v4 à div pai. Então, antes disso, podemos simplesmente fazer, eu cuspo três desses. E você pode ver que precisamos de um pouco de espaço entre cada nota. Então, muita classe para esta div com uma classe de cartão M, margem beta, painel inferior. Salve isso. Estes parecem muito bons. Vamos apenas garantir que eles fiquem bem em uma tela grande ou em uma tela pequena? Sim. Muito bom. 72. Adicione formulário de nota (Design): Vamos começar a cair no topo da nossa visualização de notas com uma área de texto em um botão que podemos usar para adicionar uma nova nota. Então, de volta ao local do moinho de bolas e vamos para a forma e geral. Vou rolar para baixo para completar a amostra agrícola, mostrar o código. Tudo o que vou pegar aqui é desta área de texto até esses botões. Então, vamos rolar para baixo o código que tem uma área de texto. E nós queremos essa div com uma classe de campos que a cercam. Então vou selecionar de lá até essa profundidade aqui com os dois botões dentro dele. Copie isso. Cole isso acima de nossas anotações. Ainda está dentro desta div com uma classe de notas. Colarei isso aqui, recuei um pouco e salvarei isso. Agora vou remover esse rótulo aqui com a mensagem de texto que está aqui. Então, livre-se disso. E eu vou me livrar dessa caixa de seleção aqui para esta div com uma classe de campo. Então vamos nos livrar disso, vamos nos livrar desses dois botões de opção, que é essa div aqui. Salve isso. Agora vou cercar a área de texto e os botões em um componente de cartão com uma cor de fundo. Então, vou ficar que vai emparelhar. Então, muita div com uma classe de cartão para dar uma cor de fundo, adicionaremos uma classe de sucesso de fundo Doc. Vou selecionar esses dois divs com uma classe de campo, cortá-los, colá-los dentro desta div, salvar isso, precisamos adicionar um pouco de preenchimento aqui. Então, vamos adicionar uma classe de P dash quatro, dar um pouco de preenchimento e precisamos de um pouco de margem na parte inferior. Então, muitas classes, MBA, margin-bottom, dash f5, salvam isso. Agora vou remover esse botão de cancelamento. Então, removerei esta div com uma classe de controle que tem o botão cancelar dentro dela. Salve isso. Não quero puxar esse botão para o lado direito. Você pode fazer isso adicionando uma classe de is dash, dash, até hoje da classe de campo. Salve isso. E eu quero mudar a cor e o texto desse botão. Vou dividi-lo em várias linhas e vou mudar o texto dentro dele para novas notas. Digamos que vamos mudar a cor de fundo adicionando uma classe de traço de casa, fundo, traço, sucesso, salve isso. Por fim, vamos alterar o espaço reservado nessa área de texto. E, de fato, vou mudar isso em uma tag de fechamento automático como essa. Divida os atributos e definiremos o espaço reservado para nova nota, salvo que isso esteja muito bem na área de trabalho. Parece muito bom no celular também. 73. Arraia de notas (Ref) [Módulo 15]: Ok, então nossa página de anotações está linda. Agora vamos fazer isso funcionar , adicionando alguns dados e métodos. Também vamos transformar essa nota em um componente filho. Vamos adicionar uma propriedade computada para exibir o número de caracteres em cada nota. E também vamos configurar um evento personalizado usando emit. Bem, em primeiro lugar, vamos configurar um href onde podemos armazenar uma lista de notas em exibição, vista de pontos de notas. Vou rolar para baixo até a parte inferior e adicionar nossas tags de configuração de script. Vou criar um comentário em bloco aqui que diz notas, configura uma constante chamada notas, definir que é igual a uma href. Precisamos importar esse método ref. Então, muitos outros comentários de bloco aqui, que dizem importações. E, novamente, esses comentários são opcionais. Você não precisa adicioná-los se não quiser. Precisamos importar ref de view. Agora vamos configurar nossa matriz de notas. Então, passaremos uma matriz para este href. Cada item na matriz será permitido por um objeto um campo ID. Vamos apenas definir isso para adicionar muito campo de conceito para o conteúdo da nota. Vou enfiar um pouco de Lorem lá. Por algum motivo M, não está funcionando agora. Vou copiar esse Lorem de uma nota codificada. Cole isso lá dentro. Muitas vírgulas após esse objeto. Duplique as notas, livre-se dessa vírgula, defina o ID como id2. Vou mudar o texto neste. Esta é uma nota mais curta. Nós salvamos isso. Agora vamos exibir essas notas em nossa página usando uma diretiva V4. Já temos uma diretiva V4 nesta div com a classe de cartão que estamos usando para nossas anotações. Então, vou mudar isso para ser nota em notas. Então, usaremos notas como nosso espaço reservado à medida que percorremos essas notas ou escrevemos. Para configurar aqui. Também precisamos adicionar uma propriedade chave. Quase defina isso para observar que este k é sempre único. Vou salvar isso. E agora podemos ver duas notas em nossa página. E só precisamos produzir nosso conteúdo, que será o conteúdo de pontos de notas. Selecionarei este texto aqui nesta tabela, a classe de conteúdo ou chaves duplas. E, em seguida, observe o conteúdo do ponto Salve isso. Recarregar. Agora podemos dizer notas A2 na página que agora estão vindo da nossa matriz de notas. 74. Adicione método de nota: Vamos configurar um método de notas de anúncio que é disparado depois de digitar algo nesta área de texto e clicar no botão, que adiciona essa nova nota à nossa matriz de notas, aqueles que a exibem na página. Primeiro de tudo, vamos configurar um href, que podemos vincular a essa área de texto para que possamos realmente ter acesso ao conteúdo que o usuário digitou. Acima da nossa matriz de notas, vou configurar uma nova coluna chamada Nova Nota. Defina isso igual a um href com um valor padrão de uma string vazia. Agora vamos encontrar essa constante em nossa área de texto. Então, vamos rolar para cima até a área de texto que está aqui. Diretiva de modelo fora de V. Defina isso como nova nota. Salve isso. Agora, se digitarmos algo nesse valor href, pressione Salvar isso. Agora podemos vê-lo na área de texto. Vamos definir isso de volta para uma string vazia e salvá-la. Agora vamos configurar um método que é disparado. Quando clicarmos neste botão, vou pular para o botão Adicionar nova nota, que está aqui. Vou dividir os atributos na tag de abertura. Adicione um manipulador de cliques. Click acionará um método chamado adicionar notas. E agora precisamos criar esse método. Então, vamos rolar para baixo após a configuração da nossa matriz de notas, este método const note é igual a uma função de seta. Por enquanto, vou fazer logout da nota de anúncio, salvar isso. Abra o console. Clique neste botão. Podemos dizer que esse método está sendo disparado porque podemos ver esse log sendo disparado. Agora, não queremos que o usuário possa clicar neste botão se a área de texto estiver vazia, porque de repente basta adicionar um nó vazio. Vamos desativar esse botão quando não houver nada nessa área de texto. Vamos pular para este botão, que está aqui. Podemos simplesmente vincular ao atributo desativado e adicionar condicionalmente esse atributo desativado na parte inferior. Só queremos adicionar esse atributo. Esta nova nota, href é uma string vazia. Para fazer isso, simplesmente não podemos fazer uma nova nota. Porque se essa string estiver vazia, ela contará como um valor 0 ou um valor falso. Então, vamos salvar isso. Agora podemos ver que esse botão está desativado. Não podemos clicar nele. E se tocarmos em alguma coisa, agora podemos clicar nele. Agora vamos trabalhar em nosso método de notas. Primeiro de tudo, precisamos de um objeto com um ID e uma propriedade de conteúdo com as propriedades do conceito definidas para o conteúdo que está na área de texto. E, em seguida, empurre o objeto para essas notas estão corretas. Devemos então ver as notas na página. Primeiro, vamos configurar esse objeto. Vou criar uma variável chamada nota. Defina isso para um objeto. E vamos precisar de uma propriedade ID. A propriedade conceitual. Agora, a propriedade conceitual que podemos simplesmente pegar desta nova nota, href, que está vinculada à área de texto. Podemos simplesmente definir essa propriedade de conteúdo dois. Novo valor de ponto de nota. Agora, para o ID, precisamos de algo único. Se você quiser, você pode usar um pacote para gerar um ID exclusivo. Uuid. Vou apenas Google UUID npm. Eu costumo usar essa versão UUID para pacote. Você pode usar isso se quiser. Mas, apenas por simplicidade, vou usar o carimbo de data/hora em milissegundos a partir da data atual para gerar esse ID acima desse objeto, primeiro vou pegar o carimbo de data/hora atual, para que possamos fazer um novo parênteses de data. E isso capturará a data atual como um objeto de data. E então, para converter isso em um carimbo de data/hora em milissegundos, podemos simplesmente adicionar ponto , obter tempo, parênteses. E agora vou atribuir isso a uma variável. Então podemos simplesmente fazer, vamos a data atual é igual. Agora, isso realmente retornará um número inteiro. Vou convertê-lo em uma string porque estamos usando strings aqui. Vou configurar outra variável chamada ID. Quase defina isso igual à data atual. Pontue duas cordas para converter esse número em uma string. Se quisermos um tiro dele um pouco, podemos nos livrar da palavra deixar uma lei de recuo um pouco. Só não sou uma vírgula. Após a primeira variável. Agora podemos simplesmente definir essa propriedade ID para essa variável de ID que configuramos aqui como uma abreviação, já que esses nomes são os mesmos, podemos simplesmente definir isso como ID assim. Agora vamos fazer logout desta nota e garantir que isso esteja funcionando. Console. Notas de log de pontos. Salve isso. Vamos adicionar algum texto aqui. Clique no botão. Podemos ver esse objeto sendo bloqueado. Sim, podemos ver a propriedade content e podemos ver o ID também, que foi gerado. Com base no carimbo de data e hora da data atual. Agora, tudo o que precisamos fazer é empurrar esse objeto para observar. Então, aqui, devemos ver a nova nota na página. Para ter acesso a essas notas, href, podemos simplesmente não fazer o valor de ponto. Podemos apenas fazer o valor de parada de nota. Então, para empurrar esse objeto para a matriz, podemos simplesmente fazer push de pontos. Em seguida, note. Vamos salvar isso e ver se isso está funcionando. Vou digitar uma nova nota. Clique no botão. No entanto, podemos ver a nota adicionada à página. Na verdade, faz sentido que nossa última nota esteja no topo da lista. Em vez de empurrá-lo irá desalterá-lo, que basicamente irá colocá-lo no início dos direitos que, no final da matriz, vou mudar a palavra empurrar para on, minúsculas no turno. Salve isso. E vamos tentar isso de novo. Sim, isso está funcionando agora. Ele está adicionando-o ao topo. Agora, depois de adicionarmos as notas, podemos ver que a área de texto ainda tem o mesmo conteúdo que acabamos de adicionar. Como nota, vamos limpar essa área de texto depois de adicionarmos o novo nó simplesmente definindo essa nova nota href, que é vinculada à área de texto de volta a uma string vazia. Assim, podemos fazer uma nova nota, valor é igual a string vazia. Vamos ver se isso está funcionando. Clique no botão. Podemos ver que a área de texto está esvaziada. Também poderíamos usar uma referência de modelo, para reorientar esta área de texto depois de adicionarmos a nova nota também. Para que o usuário possa adicionar facilmente outra nota imediatamente sem precisar clicar nessa área de texto. Vamos pular para os elementos da área de texto aqui. Muitos ref. Vou definir isso para nova nota ref. Agora podemos usar esse href para focar essa área de texto depois de adicionarmos a nova nota. Então, vamos voltar para o nosso método de adicionar notas. Na parte inferior aqui, podemos apenas fazer nova nota ref, valor de ponto para pegar o elemento real da área de texto. E então podemos apenas fazer foco em pontos. Esperamos que isso concentre a área de texto depois de adicionarmos a nova nota. Vamos salvar isso e recarregar. Certifique-se de que esteja funcionando. Olá. Adicione novas notas. Isso não funcionou. Nova nota ref não está definida. Vamos rolar para cima e verificar o href que adicionamos. Você sabe, href. Precisamos realmente configurar um dados antes que possamos usar este modelo ref. Após esta nova nota const, vamos adicionar outra coluna definida para nova nota, HREF, definir que igual a f com um valor inicial de nulo. Salve isso. E vamos recarregar novamente. Olá lá. Clique no botão. Isso parece ter funcionado. Agora adicionamos as novas notas. Limpamos a área de texto e focamos a área de texto. 75. Componente infantil - Nota: Esse componente de notas de visualização está ficando bastante longo. Agora, vamos adicionar mais algumas funcionalidades a cada nota individual, como exibir o número de caracteres, exibir um modal quando o botão de exclusão for clicado e enviar o usuário para a página de edição quando o botão Editar é clicado. Portanto, antes que esse componente de notas de visualização fique muito confuso, vamos criar um componente filho para uma nota individual. Vou pular para o Explorer e ir para os componentes de origem. Vamos criar uma nova pasta aqui para todos os componentes relacionados às nossas anotações. Vamos chamar isso de notas. Dentro disso, criarei um novo arquivo chamado tags de modelo de visualização de pontos. E vou voltar para ver a vista de pontos das notas. Quase selecione toda essa div com uma classe de cartão que está exibindo nossa nota. Basta copiar isso. Cole-o nas tags do modelo. Corrija o recuo. Vou remover o V4 e os principais atributos. Salve isso. Agora vamos voltar para ver a visualização de pontos das notas e importar esse componente. Em nossa seção de entrada, importaremos notas de componentes de barra, notas de barra, nota de barra, ponto Vue. Salve isso. Agora vamos rolar até esta div com a classe de cartão, onde estamos exibindo a nota acima que usaremos nosso componente de nota. Portanto, note que se pudermos fazer desta uma tag de fechamento automático, mova a tag de fechamento para uma nova linha. Agora podemos simplesmente copiar a diretiva VFR e a propriedade, colá-la neste componente de nota. Agora podemos nos livrar dessa div com uma classe de cartão completamente. Ao salvar essa recarga. Vemos um erro aqui, não é possível ler as propriedades do conteúdo de leitura indefinido em nosso aplicativo está quebrado. E isso porque na visualização de pontos de nota em nosso modelo, estamos tentando acessar esses objetos de nota e essa propriedade de conceito a partir dos objetos. Bem, esse objeto de nó não existe dentro do contexto desses componentes de visualização de pontos de nota. Precisamos passar isso para baixo da vista de pontos das notas de visualização, para baixo para observar a vista de pontos usando uma prop. 76. Props (Notícia): Vamos passar os objetos de notas, que estamos usando como suporte de lugar em nosso loop V4 aqui. Notas de exibição abaixo não são exibidas para a visualização de pontos de observação. Portanto, esse ponto de nota Vue tem acesso ao conteúdo do ponto de nota. Não veja o componente de nota aqui. Lote de prop chamado notas e defina que é igual a nota ao salvar isso. Agora, se saltarmos para observar a vista de pontos, precisamos receber esse prop. Precisamos adicionar scripts, configurar tags, muitos comentários em bloco, o que diz props. Agora você se lembra de como inicializamos nossos adereços? Isso mesmo. Criamos uma constante chamada adereços. Definimos isso igual para definir adereços. Podemos passar nossos prompts aqui, seja nós uma matriz ou um objeto. Vou usar um objeto para ele. Vamos receber um adereço chamado nota. O apertado vai ser um objeto. Definitivamente precisamos dessa prop para que nosso componente seja renderizado corretamente. Também devemos adicionar obrigatório para tornar isso um suporte necessário. Salve isso. E espero que isso esteja funcionando. Agora, vou recarregar ainda tudo está funcionando. E, novamente, podemos ver nosso conteúdo de nota correto vindo da matriz de componentes pai aqui. Vamos apenas nos certificar de que ainda podemos adicionar uma nova nota. Ainda podemos adicionar uma nova nota. 77. Computado (comprimento de nota): Vamos adicionar uma propriedade computada que exibe o número de caracteres que estão em cada nota abaixo do conteúdo da nota. Primeiro, vamos configurar o maquete. Portanto, a visualização de pontos da nota final abaixo de onde estamos cuspindo o conteúdo, vou adicionar uma div. E então, dentro disso, vamos adicionar uma pequena etiqueta. Por enquanto, vou colocar os textos XXX caracteres. Salve isso. Podemos ver isso na página. Para mover esse texto para a direita, vou adicionar uma classe à div de dash. Dash direitos para dar ao texto uma cor cinza claro, vou adicionar uma classe de texto, traçar luzes Dash cinza, salvar isso. Pelo menos as aulas são de bola no documentado naquele site. E apenas para adicionar um pouco de margem no topo, muitas classes vazias para margin top dash para salvar isso, agora não precisamos de uma propriedade calculada para exibir o número de caracteres. Poderíamos apenas fazer chaves duplas e, em seguida, notas, conteúdo de pontos, comprimento do ponto. Salve isso. Podemos ver que isso funciona. No entanto, eu quero usar uma propriedade computada em algum lugar do nosso aplicativo apenas para nos lembrar como configuramos isso, Vamos remover o comprimento do ponto do conteúdo do ponto da nota. Em vez disso, criaremos uma propriedade computada chamada comprimento do caractere, que exibe o número de caracteres da nota aqui. Vamos rolar para baixo e configurar essa propriedade computada chamada caractere como. Agora, você se lembra de como fazer isso? Se você quiser, você pode pausar o vídeo e ver se você pode ter isso por conta própria. Você gerenciou isso? Se não, não se preocupe. Então, para adicionar uma propriedade computada, antes de tudo, precisamos importar o método computado da exibição. Então, muitas entradas, comente, vou importar computado da visualização. E vou pular para o fundo. Não sei o comentário do bloco que diz que o comprimento do caractere configura uma propriedade computada aqui. Queremos chamar esse comprimento de caractere, criaremos uma constante chamada comprimento de caractere. Definiremos isso igual ao método calculado e, em seguida, passaremos outro método para esse método. Agora tudo o que precisamos fazer aqui é devolvido alguma coisa. Queremos retornar o comprimento da propriedade de conceito, que está neste prop de nota que estamos passando da vista de pontos das notas de visualização. Lembre-se de quando estávamos na seção de script para acessar um prop, precisamos usar essas props. Objeto. Para acessar este prop de nota. Podemos apenas fazer nota de pontos prompts. Então, para acessar a propriedade de conceito dentro disso, podemos simplesmente fazer conteúdo de pontos. Queremos cortar o comprimento disso. Queremos devolver isso. Então, podemos simplesmente adicionar retorno ao estoque. Salve isso, recarregue. Isso parece estar funcionando. No entanto, uma coisa que você pode notar é se criarmos uma nota, mas apenas tivermos um caractere, então ele ainda diz um caractere. Seria melhor se dissesse um personagem. Podemos adaptar nossa propriedade computada para cuspir essa palavra também. Com base no número de caracteres. Vou pular para nossa propriedade computada. Antes de fazer isso, deixe-me pular para o nosso modelo. Remova a palavra caracteres aqui e agora só vemos o número. Vamos rolar de volta para a nossa propriedade computada antes de retornar o valor, vou configurar uma variável chamada descrição. E vamos definir isso para caracteres ou caracteres, dependendo do tamanho da nota. E podemos usar uma declaração ternária if para fazer isso. Assim, podemos permitir que a descrição seja igual se props dot, o comprimento do ponto do conteúdo do ponto for maior que um, então podemos usar os caracteres da palavra. Caso contrário, usaremos a palavra caractere. Agora podemos depender dessa variável de descrição, caracteres ou caracteres, do comprimento que estamos produzindo aqui. Então, vou retornar uma string de modelo aqui. Coloque este comprimento de ponto props.net.content, dólar, chaves curly assim, muito espaço e, em seguida, permita nossa descrição. Então chaves encaracoladas em dólar e depois descrição. Salve isso. Isso não está funcionando. Podemos ver 199 caracteres. Um caractere, a nota que só tem um caractere. Agora, o que duplicar um pouco de código, um ponto solicita, o comprimento do ponto do conteúdo do ponto. Poderíamos arrumar isso um pouco colocando-o em uma variável. Então, no topo aqui permitido, Vamos chamá-lo de comprimento é igual a notas de parada de prop conteúdo de ponto, comprimento de ponto. E então substituirei o comprimento do ponto props.net.content, tanto aqui como aqui. Pressionarei Comando D para selecionar ambos. O atalho pode ser diferente na sua plataforma. Basta substituí-lo por esse comprimento variável. Salve isso, certifique-se de que ele ainda esteja funcionando. Vemos personagens. Se houver mais de um personagem, personagem, é apenas um personagem. 78. Excluir nota (Emit): Vamos permitir que uma nota seja excluída quando o botão de exclusão for clicado. Agora que esta nota está em um componente filho, ponto de nota Vue precisará emitir um evento da visualização de pontos da nota. Quando o botão é clicado. Em seguida, ouça esse evento na visualização de pontos das notas de exibição e, em seguida, dispare outro método aqui, que remove a nota da matriz de notas. Desde nossas matrizes de notas neste par de componentes ou não neste componente filho. Então, primeiro vamos apenas acionar uma visualização de ponto da nota final do método local. Quando esse botão de exclusão for clicado, vamos encontrar o botão de exclusão no modelo, e isso está aqui. Vou dividir os atributos nesse manipulador de muitos cliques para isso. Também usarei o modificador de prevenção para impedir que este link se comporte como um link e tente enviá-los para uma página diferente. Animal aciona um método local chamado handle, exclui clicado. Vamos criar esse método. Permitiu muitos comentários em bloco aqui. exclusões de manipulação clicadas configurarão esse método. Portanto, const handle delete clicado é igual a uma função de seta. Por enquanto, vou fazer logout do identificador de exclusão, cliquei e salvarei isso. Clique no botão Excluir. Ligado. Sim, podemos ver que o método está sendo disparado. Então, agora podemos emitir um evento personalizado desse método. Mas antes de tudo, precisamos configurar nosso array emits. Você se lembra de como fazemos isso? Um pouco parecido com a forma como montamos nossos adereços. Você quer experimentá-lo sozinho e, em seguida, sinta-se à vontade para pausar o vídeo. Mas, de qualquer forma, vou adicionar um comentário que diz que emite. Para configurar nossos limites, podemos criar uma constante chamada emit, defini-la igual ao método define emits. Podemos passar todas as nossas imagens aqui em uma matriz. Então, vamos definir um emit chamado delete clicado. Salve isso. Agora podemos emitir esse evento a partir desse componente. Então, de volta ao nosso método de exclusão de clipes de alça. Agora podemos simplesmente emitir parênteses e, em seguida, excluir clicados. Salve isso. Certifique-se de que não temos erros. Agora podemos escutar esse evento clicado de exclusão na visualização de pontos das notas da visualização do componente pai. Vamos pular para esse componente. Vá para o nosso componente de notas aqui. Tenho permissão para manipulador de eventos personalizado aqui. Então, delete clicado, que é o nome usamos para nossa missão quando recebemos esse evento, vamos acionar um método neste componente acionará um método chamado delete note. Vamos criar esse método. download na parte inferior. Muitos comentários em bloco que dizem Excluir nota. Podemos configurar este método, const delete notes é igual a função de seta. Vamos fazer logout excluir a nota. Por enquanto, salve isso. Clique no botão Excluir. Podemos dizer que esse método no componente pai está sendo disparado. No entanto, neste ponto, como sabemos qual nota remover da matriz? Precisamos de algo para identificar a nota que queremos excluir. Poderíamos usar a propriedade ID. Se saltarmos de volta para a visualização de pontos da nota, poderemos passar o ID da nota junto com esta imagem. Podemos apenas adicionar um segundo parâmetro aqui. Podemos pegar o ID deste suporte de anotações que estamos passando para baixo. Isso vai ser na nota de ponto de adereços, ID de ponto. Aqui. Podemos apenas fazer notas de pontos de adereços ao salvar isso. Agora vamos voltar para o componente pai denota a visualização de pontos para este método de anotação de exclusão. Podemos passar esse parâmetro aqui. Vamos chamá-lo de ID para excluir. Vamos apenas fazer logout e garantir que ele esteja passando. Então, ID para excluir, salve isso. Vou recarregar, clicar no botão Excluir. Sim, podemos ver Delete Note Id1, que é o ID da primeira nota. Se clicarmos no botão Excluir na segunda nota, você pode dizer delete know id2. Sabemos que esse ID está passando corretamente. Agora, há várias maneiras de remover as notas da matriz. Poderíamos descobrir o índice das notas com base no ID e, em seguida, excluir o item que está no índice. Se quisermos usar uma solução de uma linha que possamos usar o filtro para definir essa matriz de notas em si, mas filtrada para que apenas as notas que não têm esse ID sejam retornadas. O que podemos fazer aqui, vamos sobrescrever esta matriz de notas ref. Para acessar esse href, não podemos fazer o valor de ponto do. Isso é sobrescrevê-lo. Podemos apenas fazer iguais. E não vamos fazer o valor do ponto de novo. Mas desta vez vamos filtrá-lo. Então, filtro de pontos. Primeiro, precisamos adicionar nosso espaço reservado, que será usado à medida que estamos percorrendo o array, pois ele está olhando para cada item na matriz. Então, podemos usar a nota para isso. Em seguida, podemos adicionar uma função de seta, que será acionada para cada nota na matriz à medida que estivermos percorrendo ela. E então podemos especificar o que queremos retornar. Vou esticar isso em um minuto. Vamos retornar apenas itens na matriz onde o ID do ponto de notas não é igual a esse ID que estamos passando para essa função. Portanto, não é igual a id2, exclua. Acho que isso deveria fazer isso. Então, vamos salvar isso. Recarregar. Clique em Excluir. E agora podemos excluir nossas anotações. 79. Pinia - Configuração e Estado [Módulo 16]: Acho que agora é um bom momento para adicionar gerenciamento de estado ao nosso aplicativo usando um centavo. De um modo geral, se você for adicionar gerenciamento de estado ao seu aplicativo, quanto mais cedo melhor. Porque adicionar gerenciamento de estado a um aplicativo, que já é realmente complicado, pode trazer muitas dores de cabeça. Mas desta vez vamos instalar um centavo do zero em vez disso tudo do zero porque não escolhemos adicioná-lo ao nosso projeto automaticamente. Vamos apenas o Google Penny. O centavo um site. Comece e vou pular para começar. Primeiro de tudo, precisamos instalá-lo com NPM ou Yarn. Vou usar o npm. Então, precisamos pular para o nosso terminal. Mate o processo surdo com o Control C. Execute npm install, penny, que está instalado. Então, vamos iniciar nosso aplicativo novamente com npm run dev, fechar o terminal. A próxima coisa que precisamos fazer é criar uma pédia, a loja raiz e passá-la para o aplicativo. Fazemos isso em main.js. Vou abrir o Explorer e ir para a fonte e o main.js. Então, primeiro precisamos importar, criar um centavo da Pena. Copiarei esta linha e a colarei depois que essa importação criar a partir da linha de visualização, cole-a lá. E agora só precisamos acionar o método dos EUA em nosso aplicativo e, em seguida, acionar esse centavo de criação, um método dentro disso. Depois que isso criar um esboço, vou adicionar parênteses de uso de pontos. E então, dentro disso, vou criar parênteses. Vamos salvar isso, certifique-se de que não temos nenhum erro. Vamos recarregar o aplicativo. Não há erros. Então agora precisamos criar um centavo por talo. Vou saltar de volta para o centavo um site. Vou saltar para trás para o que é um centavo uma piada para o exemplo básico. E isso nos dá um exemplo básico aqui. Você pode colocar seu centavo arquivos de loja onde quiser. Mas eles parecem recomendar colocá-los nesta pasta de lojas. Vamos criar uma nova pasta. A pasta de origem chamada stores criará nosso arquivo STL aqui. Você pode chamar isso do que quiser, mas vou chamá-lo de notas da loja, porque esta é uma loja para nossas anotações e todos os métodos relacionados a essas notas. Agora vou copiar o código desse exemplo básico. Cole isso aqui. Tudo o que isso está fazendo basicamente é usar esse método define store para configurar nossa loja. E colocamos todas as nossas ações estatais e getters aqui. E então nós apenas atribuímos essa loja a essa constante e exportamos para disponibilizá-la para qualquer componente em nosso aplicativo. Então, vamos dar esse nome constante, um nome mais significativo. Então, poderíamos chamar isso de notas da loja dos EUA. E também vamos dar a esse nome aqui um nome mais significativo que poderíamos chamar de notas da loja. Por enquanto, vamos remover o objeto dessa ação nesses dois comentários. E vamos nos concentrar no estado para começar. Vamos colocar isso em várias linhas. E agora podemos copiar notas ou escrever no estado na loja. Vou fechar o main.js e vamos pular para ver as notas. visualização de pontos onde atualmente temos nas notas está bem aqui. Eu só vou copiar os dois objetos dentro desta matriz por enquanto, copiá-los, pular. Mas para armazenar Node.js definirá uma propriedade chamada notas. Defina isso igual a uma matriz. Vamos colar essas notas nesta matriz de notas. Salve isso. Agora devemos ser capazes de importar essa loja para qualquer um de nossos componentes onde eles possam ter acesso a essa matriz de notas, que está em nosso estado nesta loja. Lembre-se de que o estado é apenas para armazenar dados. 80. Use nossa loja: Vamos importar isso sem um tostão, embora tenhamos criado na visualização de pontos de notas, página de notas. E use a matriz de notas que está em nossa loja para exibir nossas notas na página. Em vez de usar a matriz de notas, que codificamos na visualização de pontos de notas de visualização. Primeiro de tudo, precisamos importar nossa loja para a vista de pontos de notas de visualização. Queremos importar essa constante aqui, use as notas da loja. Então, vamos pular para ver a visualização de pontos das notas. Olhe para nossas entradas e vamos apenas adicionar chaves de importação. Use notas roubadas de lojas de barras, loja de barras sabe, salve isso. Recarregar. Para ter acesso à loja em nosso componente, precisamos atribuí-la a constante ou variável. Muito. Outro comentário de bloco aqui que diz loja. E criaremos uma constante chamada notas da loja. Atribua isso para usar notas de loja, parênteses. Salve isso. Agora que fizemos isso, devemos ser capazes de ver nossa loja em nossas ferramentas de desenvolvimento de visualização. Então, vamos clicar nesta pequena seta dupla e depois ver. Ele diz no console a última loja de rosquinhas instalada. E podemos ver como roubou o clique livre deles sobre isso. Podemos dizer que nossas anotações armazenam todos os dados de cada nota. Agora vamos produzir essas notas da matriz de notas que está em nossa loja. Em vez da matriz codificada na visualização de pontos das notas de visualização aqui, podemos simplesmente pular para o nosso componente de notas. Em vez de v para nota em notas. Podemos fazer notas V4 no nome da nossa loja, que é notas da loja. Podemos fazer anotações da loja em que queremos acessar as notas estão corretas. Então, podemos apenas fazer notas de ponto. Salve isso, recarregue. Ainda podemos ver em notas na página, exceto que agora elas estão vindo da nossa loja. Em vez dessa matriz, que está em nosso componente de visualização de parada de observação, agora devemos ser capazes de nos livrar dessa nota. Então, certo, salve isso. Ainda podemos ver nossas anotações na página. Se formos para o DevTools, alteramos o conteúdo em uma de nossas anotações. Poderíamos dizer que nossas notas são atualizadas em tempo real no modelo também. Vou recarregar isso. Se saltarmos para armazenar notas, dot js, altere o conteúdo de uma dessas notas. Vou apenas remover alguns dos textos e salvá-los. Eu mencionei anteriormente que o recarregamento a quente não parece estar funcionando no momento. Não vimos essa recarga quente quando eu mudo o conteúdo desta nota na loja. E também mostrei que há um guia, o centavo, um site. Rolamos aqui para baixo, substituição de módulos e tentamos fazer esse trabalho com base neste exemplo. Não funcionaria. Ainda não consegui encontrar uma maneira de fazer esse trabalho no momento em que estou gravando isso, mas sinta-se à vontade para experimentá-lo. Talvez esteja funcionando agora no futuro onde você está. E se você encontrar uma solução, compartilhe-a com esta palestra. Se eu encontrar uma solução e muita palestra para este curso explicando isso. 81. Ação - Adicione nota: Vamos adicionar uma ação à Penny, uma loja, que nos permitirá adicionar uma nova nota a esta nota, que está em nosso estado e nossas opiniões as armazenam, adicionando as novas notas à página, já que essas notas estão chegando agora a partir dessas notas diretamente em nosso estado. Agora, se tentarmos adicionar novas notas agora, vemos que as notas de erro não estão definidas. E isso porque se formos ver a visualização de pontos de notas neste método Adicionar nota nesta linha aqui, tentamos adicionar um novo objeto de nota a esta matriz ref de notas, que não existe mais aqui. Mas agora queremos adicionar um novo objeto de nota a essa matriz de notas, que está em nossa loja de opinião. Vamos pular de volta para o centavo um site e pular para o que é um centavo um exemplo básico. Ele nos mostra aqui como adicionamos ações à nossa loja. Só precisamos adicionar um objeto nomeado ações após nosso estado e podemos colocar todas as nossas ações aqui. Lembro-me de ações são apenas métodos que nos permitem acessar os dados em nosso estado e depois modificá-los. Vamos voltar para armazenar Node.js. E, por enquanto, vou recolher o método e o objeto do estado apenas clicando nesta pequena seta. Depois disso, adicionaremos um objeto chamado leilões. E agora podemos colocar todas as nossas opções aqui. Vamos criar uma nova opção chamada nota ímpar. Por enquanto, vou fazer logout de nossas anotações e dizer que agora podemos acionar essa ação de qualquer lugar dentro do nosso aplicativo. Vamos acioná-lo a partir da visualização de pontos das notas de visualização. Poderíamos apenas acionar esse oxigênio diretamente nas novas notas colocadas aqui neste manipulador de cliques. E estamos puxando uma loja como notas roubadas. Então, para acessar nossa loja, podemos começar as notas da loja. E, em seguida, para acessar a ação, acabamos de iniciar as notas. Podemos começar a nota ímpar ponto. Não precisamos adicionar parênteses a esse método quando o acionamos em nosso modelo. Então, vamos salvar isso e ver se isso está funcionando. Vou digitar uma nota e clicar em novas notas. Sim, podemos ver que anotaria estar bloqueado. Isso está disparando com sucesso nossa ação. No entanto, se saltarmos para o nosso método de nota de anúncio anterior, que está na visualização de pontos das notas de exibição. Temos essas duas linhas na parte inferior, esta que está limpando a nova nota ref, aquelas limpando a área de texto. Esta linha, que está focando a área de texto usando este modelo REF que definimos para que adicionamos à área de texto aqui. Agora não vamos ter acesso a este modelo V, declará-lo, todo esse modelo se refira para focar a área de texto de dentro da nossa loja. Faz sentido continuar a acionar esse método local, adicionar notas, quando clicamos no botão Adicionar nova nota e, em seguida, acionar nossa ação a partir daqui, para que ainda possamos disparar essas duas linhas no bottom, que irá limpar a área de texto e focar a área de texto. Então, vamos alterar esse manipulador de cliques na nova caixa de entrada de cadernos de arte e o que ele estava acionando esse método de notas local comentará todo esse código que estava configurando o novo objeto de nó. E depois mudá-lo para a matriz de notas ref, que tínhamos aqui antes. Em seguida, acionará a ação em nossa loja. Em vez disso, podemos simplesmente fazer notas de loja. Observe que quando estamos acionando uma ação da nossa seção de script, precisamos adicionar parênteses. Então, vamos salvar isso e ver se essa ação em nossa loja ainda está sendo acionada. Vou recarregar, digitar uma nota e clicar no botão. E, no entanto, podemos dizer, eu saberia que está sendo exibida, bem, essa ação precisa saber o que devemos realmente adicionar às nossas anotações diretamente no estado. Precisamos realmente passar o conteúdo desta nota que foi digitado na área de texto para essa ação. Assim, podemos configurar um novo objeto de nota com base em seu conteúdo e adicioná-lo à nossa matriz de notas que está no estado. Poderíamos fazer isso usando parâmetros. 82. Ação (com parameters) - Adicione nota: Precisamos passar o novo conteúdo de notas da visualização de pontos das notas para nossa nova ação de adicionar notas que está em nossa loja, antes de podermos configurar um novo objeto de nota e adicioná-lo a essa matriz de notas que está em nosso estado. Podemos passar parâmetros para ações quantos parâmetros quisermos, assim como podemos com qualquer função em JavaScript. Então, vamos voltar para View note stop view. E nosso novo conteúdo de nota está nesta nova nota href, que está vinculada a essa área de texto. Quando acionamos nossa ação aqui, podemos simplesmente fazer notas de armazenamento para adicionar notas e depois passar novo valor de ponto de nota e salvá-lo. Agora, se saltarmos de volta para as notas da nossa loja dot js nesta nota oxigênio, podemos receber esse parâmetro aqui. Podemos dar qualquer nome que quisermos, para que possamos chamá-lo de novo conteúdo. Certifique-se de que isso esteja passando. Vamos apenas logá-lo aqui. Então, quando você anotar o conteúdo, salve isso, recarregue. Clique no botão ligado. Sim, está funcionando. Podemos ver que nossa ação está desconectando a nota que acabamos de digitar. Agora só precisamos configurar um novo objeto de nota como este com um ID em uma propriedade de conceito e adicioná-lo a essas notas já em nosso estado. Então, vamos voltar para ver as notas que não são exibidas. E vamos chamar esse código que comentamos . Salve isso. E vamos colar isso em nossa ação aqui. Remova os comentários, corrija o recuo e precisaremos modificar isso um pouco. Então essa linha ainda está boa. Isso ainda vai conseguir que a data atual nesta linha esteja boa. Ele só vai converter esse carimbo de data/hora em uma string e atribuí-lo a essa variável de ID. Deixe-me configurar suas anotações. Objetos já estavam configurando nossa ID. Tudo bem. Mas quando definimos a propriedade de conceito, não queremos mais pegar isso do novo valor de ponto de notas. Queremos pegá-lo desse parâmetro que estamos transmitindo novos conteúdos de notas. Vamos copiar isso, colar isso aqui. E então, quando desdeslocamos esses novos objetos de notas para nossa matriz de notas, agora queremos enviá-lo para a matriz de notas que está em nosso estado. Podemos acessar as propriedades de dados em nosso estado interno e oxigênio usando a palavra-chave this. Um pouco como fizemos na API Opções para acessar nosso array de notas, que é chamado apenas de notas. Podemos apenas fazer essas notas de ponto. E então queremos desmudar esses objetos de notas para essa matriz. Então, podemos apenas fazer essas notas de ponto no turno, parênteses, nota, e agora podemos simplesmente nos livrar dessa linha. E vamos salvar isso e ver se isso está funcionando. Digite uma nova nota. Clique no botão ligado. Sim, está funcionando. Vemos isso adicionado à página em nossas ferramentas de desenvolvimento. Podemos dizer que foi adicionado às nossas anotações ou escrever em nosso estado aqui também. 83. Ação - Apagar nota: Vamos configurar uma ação em nosso repositório de opinião para excluir um nó. E nosso botão de exclusão está em nosso componente de nota. Em notas de componentes ou vista de ponto de nota. Digamos o que está acontecendo agora com essa funcionalidade de exclusão. Neste botão de exclusão aqui temos este manipulador de cliques que irá acionar este método local manipulado por clipes de exclusão. Esse método está aqui. E então, dentro disso, estamos emitindo um evento personalizado chamado delete clips. Estou passando o ID das notas que queremos excluir. Em seguida, no componente pai denota a visualização de pontos, a rolagem para cima até o componente de notas. Estamos ouvindo esse evento quando o recebemos, o que está aumentando esse método de anotação de exclusão. Com isso, removendo a nota da matriz com base nessa ideia que estamos transmitindo essas notas locais ou oito não existem mais aqui. Isso não vai funcionar de qualquer maneira no momento. Mas de qualquer forma, uma vez que começamos usar o gerenciamento de estado em nosso aplicativo, seja por meio de composable, UX ou centavo ou como estamos usando. Não precisamos nos preocupar em emitir eventos personalizados de componentes filhos para par de componentes e, em seguida, ouvir esses eventos antes de acionarmos um método. Porque lembre-se, todos os componentes do nosso aplicativo, não importa o quão profundamente aninhados, têm acesso a tudo o que está em nossa loja, incluindo tudo em nosso estado e todas as nossas ações. Vamos configurar uma nova ação de exclusão de notas em nossa loja e acioná-la diretamente na visualização de pontos do nó sem precisar emitir eventos personalizados ou ouvir esses eventos. Ok, então vamos pular para armazenar Node.js. E vou recolher este leilão de notas em uma vírgula e adicionar uma nova ação chamada delete notes. Para excluir a nota das notas ou escrever em nosso estado, precisaremos do ID. Então, configuraremos isso para receber esse ID com uma variável chamada ID a ser excluída. Vamos apenas fazer logout do ID para excluir também. Id para excluir e salvar isso. Agora, observe a vista de pontos. Em vez de acionar esse método local manipulado realmente clicado quando botão de exclusão é clicado, vamos importar a porta da nossa Penny aqui. Acione esta nova Ação, Exclua Nota diretamente. Em vez disso, vou pular para ver as notas ponto Vue. Copie esta linha onde estamos importando nossa loja. Cole isso na visão de ponto superior da nota que precisamos para ter acesso à nossa loja, como fizemos na visualização de pontos de notas, atribuindo nossa loja a uma constante. Então, vou copiar esse comentário no código também da visualização de pontos das notas. E vamos colar isso depois de nossos avisos sobre os mitos, agora temos acesso à nossa loja neste componente de pontos de notas Vue, agora podemos pular para este botão Excluir, acionar esta ação Excluir nota diretamente. Vamos nos livrar dessa chamada de método clicado para excluir identificador e, em vez disso, faremos notas de loja, Deleção de pontos, Nota. Precisamos passar o ID da nota. Lembre-se de que estamos passando o objeto de notas com um suporte aqui. Portanto, nosso ID de nota está disponível em props dot, dot ID. Vou observar a ID do ponto se estivermos no modelo para que possamos passar a nota DID salve isso. E esperamos que nossa Nota de Exclusão de Ação esteja recebendo o ID e o logoff. Então, vamos ver se isso está funcionando. Clique no botão Excluir. Deixe-me ver ID1 sendo bloqueado. Clique no outro. O que é inimigo? Veja id2 sendo bloqueado. Agora vamos voltar para anotar a vista de pontos e fazer alguma arrumação. Porque não precisamos mais desse método de exclusão de clipes manipulados. Não estamos mais usando isso. Também não precisamos mais definir delete clicado como um emit porque não estamos mais emitindo isso, podemos simplesmente remover nosso código de emits no comentário completamente. Salve isso. E se saltarmos para ver a visualização de pontos das notas, role para cima até o componente de nota. Não precisamos mais ouvir esse evento clicado por atraso. Não estamos mais emitindo isso a partir da vista de pontos da nota. Assim, podemos removê-los também. Salve isso. E se rolarmos aqui para baixo, agora não disparamos mais esse método de anotação de exclusão. Então, vou apenas copiar o código de dentro desse método e, em seguida, apenas excluir esse método no comentário também. Salve isso. Agora vamos pular para armazenar Node.js e vamos colar esse código neste método de anotação de exclusão. Só precisamos ajustar isso um pouco. Não vai mais filtrar o valor não, parar o valor e depois atribuir essa matriz filtrada de volta ao valor de parada de notas. Agora queremos fazer isso com essas notas já que estão em nosso estado. Novamente, podemos substituir esse valor de ponto Snopes. Selecionarei os dois pressionando Alt. Em vez disso, podemos apenas fazer essas notas de ponto. Isso vai pegar todas as notas estão corretas filtrá-lo com base nos critérios aqui. E ele retornará todas as notas em que o ID da nota não é igual ao ID que estamos passando aqui. Esses nomes de variáveis ainda são os mesmos, então não acho que precisamos fazer mais alterações. Vamos salvar isso e veremos se isso está funcionando. Vou recarregar, clicar no botão de exclusão e podemos ver que a nota foi excluída, e também vemos o objeto removido em nossas ferramentas de desenvolvimento também. Se eu excluir este, agora veremos uma matriz vazia e nossas ferramentas de desenvolvimento. 84. Edição página e rota: Agora podemos criar, ler e excluir nossas anotações. No momento, não podemos atualizar nossas notas. Vamos completar nossa configuração bruta. Crie, leia a atualização, exclua criando uma nova página de nota de edição que nos permitirá editar uma nota e salvá-la. Para isso, vamos adicionar uma nova ação ao nosso centavo a loja e também nosso primeiro getter. Mas, por enquanto, vamos configurar uma nova rota na página para editar uma nota. Vou pular para o nosso explorador. Na pasta views. Vou criar um novo arquivo chamado View Edit note, não visualize. Adicionaremos nossas tags de modelo. Para começar. Vou apenas adicionar uma div com uma classe de edição, um traço notas dentro daquela grande quantidade de tag H1 que diz apenas editar notas. Salve isso. E agora precisamos configurar nossas rotas. Então, vamos pular para o roteador de origem, index.js. Muitas novas rotas aqui após a rota de poucas notas, vou selecionar todos os lotes de pressionar Alt Shift e atalho para baixo pode ser diferente para você duplicar isso. E definiremos o caminho para editar nota para seguir essa rota, para saber quais notas que realmente editaremos a carga na página, então precisaremos passar por uma rota parâmetro para esta parte. Então, para fazer isso, podemos apenas cortar pontos e, em seguida, dois pontos, e depois o nome de um parâmetro, ou poderíamos simplesmente chamá-lo de ID. Então, em outras palavras, poderíamos visitar editar notas slash id um e, em seguida, podemos pegar o ID, ID 1 nesta visualização e usá-lo para pegar a nota apropriada em nossas anotações ou escrever em nosso estado em nossa loja e, em seguida, exiba os conceitos dessas notas em uma área de texto nesta página para que possamos editá-las e salvá-las. E vamos alterar o nome dessa rota para editar notas, precisamos importar um novo componente. Então, vou duplicar essa linha de notas de importação e substituir notas de visualização pela nota de edição de visualização. E então eu copiarei esse nome, visualizo a nota de edição e colarei aqui. Vou salvar isso. Agora devemos ser capazes de visitar um caminho como eu anotei o ID de barra um e obter duas novas páginas de notas de edição. Agora precisamos ser capazes de chegar a esta página sem precisar digitar a barra de endereços. Vamos conectar esses botões Editar. Só vou fechar tudo aqui , exceto, não, não ver. E vamos encontrar nosso botão de edição. E isso vai dividir isso em novas linhas e, em seguida, dividir os atributos na tag de abertura. Na verdade, podemos simplesmente mudar isso em um componente de visualização de roteador em vez de uma tag. Então, vamos renomear a tag para o link do roteador. Verifique se a tag de fechamento também foi renomeada. E agora podemos começar um adereço para isso para dizer para onde ir. Vou usar uma string de modelo para fazer isso usando cerca de seis para que possamos exibir o ID. Queremos ir para a nota de edição da barra de caminho, que configuramos em nosso arquivo de roteador e, em seguida, barra. E então usaremos chaves onduladas em dólar para produzir o ID. E, novamente, estamos passando os objetos de notas para esses componentes de visualização de pontos do nó. Usando essas notas prop, podemos obter acesso ao ID out prompts dot note, DID ou no modelo apenas anote o ID do ponto. Aqui. Podemos apenas colocar notas, ID de pontos, e vamos salvar isso. Veja se esses botões Editar estão funcionando. Clique no primeiro botão de edição e ainda escreveu o ID da barra de notas de edição do caminho. Volte, clique no segundo botão de edição. Agora, no caminho editar a barra de notas id2, podemos acessar esse parâmetro de rota que nomeamos em nosso arquivo de roteador aqui em nosso modelo usando os objetos de rota dólar, que também poderíamos usar as opções API. Então, vamos cuspir esse ID de parâmetro de rota na página e ver se isso está funcionando. Portanto, queremos abrir nosso novo componente de notas de edição de visualização. Portanto, exibições de origem, visualize notas de edição. E vamos mudar esse título para editar notas com um ID de chaves duplas normais. Acesse as informações da nossa rota. Podemos adicionar rota de dólar e em seguida, acessar nossos parâmetros de rotas, podemos fazer pontos params e, em seguida, acessar o parâmetro ID que configuramos aqui, podemos apenas fazer ID de ponto. Então, espero que isso esteja cuspindo no ID da nota na página. Agora, vamos salvar isso. Recarregar. E, no entanto, se estivermos no caminho editar nope slash id2, vemos id2 na página. Se clicarmos no primeiro botão de edição, deixe-me ir para o caminho editar notas barra ID um. Agora vemos o ID1 na página. 85. Componente reutilizável - AddEditNote Note: Ok, o que realmente precisaremos nesta nova visualização de notas de edição que criamos para editar uma nota e salvá-la. Bem, basicamente o que precisamos é de uma área de texto na qual podemos carregar a nota e permitir que o usuário a edite. E precisamos de um botão salvar para que o usuário possa salvá-lo. Então, basicamente, o que precisamos é que se voltarmos exatamente o que temos no topo da nossa visualização de anotações aqui, só precisamos de uma área de texto e um botão. Agora poderíamos pular para nossa visão de anotações. Nas exibições de origem, visualize as notas. Poderíamos simplesmente copiar esse elemento de cartão e todos os campos dentro dele. Cole isso na exibição, edite a visualização de pontos da nota e, em seguida, reaproveite-a. Bem, então estaríamos duplicando código. Sempre queremos evitar duplicar código o máximo possível. Portanto, faz mais sentido criar um componente reutilizável a partir deste cartão, a área de texto e a manteiga que podemos usar em qualquer lugar dentro do nosso aplicativo. Vamos pular para nosso explorador em nossa pasta de notas. Vamos criar um novo arquivo chamado Edit note dot view. Porque poderemos adicionar e editar uma nota usando esse componente. Vamos adicionar nossas tags de modelo. Agora vamos pular para ver as notas ponto Vue copiará este mock-up, esta div com uma classe de cartão. Todas as coisas dentro dele copiarão isso, colá-lo em nosso modelo aqui em nosso novo componente. Vamos remover todas as coisas dinâmicas que quebrarão aqui. Então, vamos remover este modelo V da área de texto e remover esse manipulador de cliques no suporte desativado dos marcadores atingidos. Salve isso. Agora queremos poder controlar os botões que são exibidos aqui. Porque na nossa página de anotações queremos isso, novos cadernos, mas na página de edição, provavelmente queremos um botão que diga Salvar ou Salvar nota ou algo assim. Também podemos querer adicionar mais de um botão também. Então, vamos criar um slot aqui onde podemos inserir o botão de edição que queremos. Só vou pegar o ableton. Em vez disso, adicionaremos um slot, tornaremos este um slot nomeado. Então, muitos nomes, atribuem e definem isso para botões. Salve isso. Agora vamos usar esse novo componente em nossa visualização de notas e fazer tudo funcionar lá antes usá-lo em nossa nova página de edição. Vamos pular para ver a vista de pontos das notas. Vou importar esse componente que acabamos de criar. Isso depois de nossas anotações. Vou duplicar essa linha. E quando você for importar, adicionar, editar nota de componentes de barra notas barra adicionar, editar notas, ponto Vue. Salve isso. Agora vamos rolar para cima. Vou comentar todo esse elemento de cartão. Em seguida, as saídas são um novo componente. Edite, observe, salve isso. Vemos a área de texto, mas não vemos o botão. Precisamos passar o botão para o nosso slot. Dentro deste componente Adicionar nota Editar, podemos adicionar uma tag de modelo. Podemos adicionar slots v dash, botões de dois pontos, que é o nome do slot que configuramos em Adicionar edição vista de ponto de nota aqui. Podemos mostrar isso apenas fazendo botões de hash e agora podemos colocar objetos nele aqui. Então, vamos pegar isso da maquete que comentamos. Então o botão está aqui. Vou copiar isso. Cole-o aqui. Salve isso. Tudo parece corretamente agora. Mas não está funcionando porque essa área de texto, que agora vem do nosso novo componente reutilizável, não é mais essa nova referência de nota em nossa seção de scripts. Vamos consertar isso em seguida. 86. Conecte com modelValue: Esta área de texto no botão não funciona mais. E isso ocorre porque essa área de texto, que está em nosso novo componente filho no ponto de nota de edição Vue, não está mais conectada a essa nova referência de nota que configuramos neste componente de notas de visualização. Bem, o que podemos fazer é passar esta nova nota ref para Editar componente filho da nota usando o modelo V. Então podemos conectar tudo usando o valor modal e atualizar o valor modal. Então, primeiro vamos definir o modelo V, este componente Adicionar nota de edição para nova nota, que foi originalmente vinculada à área de texto. Podemos adicionar uma diretiva modelo V e defini-la como novas notas e salvá-la. E agora podemos receber o valor desse modelo V em nosso componente de nota de edição usando a prop de valor modal especial e, em seguida, combinamos a prop para essa área de texto. Você se lembra de como fazemos isso? Sinta-se à vontade para pausar o vídeo e experimentá-lo. O que precisamos fazer é adicionar nossas tags de configuração de script. Precisamos receber o valor desse modelo V usando a prop de valor do modelo. Então, precisamos configurar nossos adereços. Fazemos isso adicionando uma constante chamada conjunto de props igual ao método define props. E podemos passar nossas instruções aqui. Queremos receber o valor do modelo prop type será string. Isso será necessário. Então, definiremos obrigatório como verdadeiro. Salve isso. E agora podemos vincular essa prop de valor modal à área de texto. Poderíamos fazer isso apenas definindo o modelo V para o volume do modelo. Vou salvar isso. Para verificar se isso está funcionando. Vamos saltar para observar que a visualização vou alterar o valor padrão desta nova referência de nota que está aqui. Então, vou colocar algum texto lá, salvar isso. Podemos dizer que o texto está chegando à área de texto em nosso novo componente reutilizável. No entanto, se produzirmos essas novas notas em algum lugar em nossa página. Então, digamos que tivéssemos uma pré-tag depois desse componente add edit nope. E acabamos de produzir uma nova nota. Salve isso, recarregue. E então fazemos uma alteração na área de texto. Podemos dizer que o valor desta nova nota ref não está sendo atualizado. E, portanto, o que precisamos fazer isso no novo componente filho visualização de ponto da nota de edição é explicitamente informar o componente pai se você anotar a exibição de interrupção quando o valor na área de texto for alterado para que ele possa atualize o valor. Esta nova nota href. Podemos fazer isso usando o valor do modelo de atualização. Então, vamos pular para adicionar a visualização de ponto de nota de edição. Você se lembra de como fazemos isso? Mais uma vez, sinta-se à vontade para fazer uma pausa e tentar fazer você mesmo. Mas o que precisamos fazer nesta configuração, nossas luvas criam uma constante chamada emit, definem-na igual ao método define emits. E podemos passar nossos eventos imitáveis para esse array emits definido. E queremos adicionar o valor do modelo de dois pontos de atualizações de eventos. Este é um evento especial que nos permitirá modificar diretamente um valor que vem do componente pai pelo modelo V sem precisar emitir nenhum evento do componente filho e ouça esses eventos e depois faça a mudança. Portanto, atualizar o valor modal nos permite modificar essa nova nota, href, que está em um componente pai. Então, vamos pular de volta para ele. Visão de ponto não. E o que podemos fazer aqui é ouvir o evento inputs nesta área de texto, que será acionado toda vez que fizermos uma alteração nessa área de texto. Então, podemos simplesmente adicionar entradas. O que queremos fazer é emitir. Com o dólar emit. Queremos emitir o evento de valor do modelo de dois pontos de atualização. E precisamos passar o valor que queremos definir que, para, definir o valor que está sendo passado com o modelo V no componente pai como o segundo parâmetro. E assim podemos simplesmente definir isso para o volume do modelo. Salve isso. Vamos ver se isso está funcionando. Recarregue esta página, altere o valor da área de texto. Sim, podemos ver essa pré-conversa nas notas de visualização ponto Vue componente está sendo atualizado. Portanto, sabemos que essa nova nota aproximada no componente pai está sendo atualizada com sucesso pelo componente filho na visualização de ponto de edição da nota ouvindo o evento de entrada no texto e, emitindo o valor do modelo de atualização em seguida, emitindo o valor do modelo de atualização de passar o valor mais recente, que então atualizará diretamente o valor das novas notas do modelo V, que estamos passando aqui. Antes de seguirmos em frente, vamos remover essa pré-conversa que adicionamos em todo esse código que comentamos. Livre-se disso. Também precisamos definir o valor padrão da nova nota de volta para uma string vazia. Salve isso, recarregue. Vamos garantir que tudo esteja funcionando. Então coloquei uma nova nota, clique no botão e a nova nota foi adicionada. No entanto, vemos um erro em nosso console não pode ler as propriedades do foco de leitura nulo. E isso porque nesta linha aqui, depois de adicionarmos novas notas enviando a constante de nota para nossa ação de nota de aplicativo em nossa loja, estamos tentando focar um elemento que tem um modelo href de nova nota ref. Esse href não existe mais neste componente. Este modelo Req agora está inativo no componente filho na visualização de ponto de edição da nota aqui. É por isso que essa área de texto não está focada depois de adicionarmos uma nova nota, e é por isso que estamos vendo esse erro. Vamos consertar isso em seguida. 87. Fix o foco: Quando digitamos uma nova nota, clique no botão Adicionar nova nota. Podemos ver que as notas são adicionadas à nossa lista e adicioná-las à nossa loja de opiniões para as notas estão bem no estado. No entanto, a área de texto não é redirecionada e vemos que esse erro no console não pode ler propriedades sem foco de leitura , a menos que porque na visualização notas ponto vista depois de adicionarmos as notas às notas estão bem na loja. Estamos usando este modelo ref, nova referência de nota para pegar o elemento da área de texto e, em seguida, focá-lo. Bem, este modelo ref, nova nota href não existe mais neste componente de notas de visualização. Então, vamos remover essa constante aqui, que configuramos para o modelo ref. E também remova essa linha onde estávamos focando a área de texto e encontre outra maneira de fazer isso. Uma coisa que poderíamos fazer é adicionar uma referência de modelo ao componente Adicionar nota Editar que estamos exibindo aqui. E use esse modelo ref para obter acesso às notas de edição ímpares do componente filho e, em seguida, dispare um método configurado dentro do componente Adicionar Editar No.2. Vamos adicionar uma referência a esse componente. E vamos chamá-lo de adicionar, editar, anotar , ref, salvar isso e vamos pular para baixo. Precisamos liquidar dados, gravar isso também com o mesmo nome. Portanto, criaremos uma constante chamada Editar nota HREF, definida que é igual a uma ref de dados com um valor inicial de nulo. Agora, em nosso método de nota aqui, depois de limpar a nova nota ref, aqueles que limpam a área de texto, podemos acessar o componente filho na nota de edição usando este modelo href, podemos editar note ref dot value para acessar esse componente. E podemos então acionar um método que está nesse componente. Então, digamos que queremos acionar um método chamado área de texto Foco. Podemos fazer isso assim. Agora ainda não configuramos esse método de área de texto de foco. Então, vamos salvar isso e pular para adicionar a visualização de ponto de nota de edição, configurar esse método. Vamos começar uma nova seção aqui com um comentário que diz que área de texto de foco criará esse método. Portanto, a área de texto de foco é igual a uma função de seta. Por enquanto, vou sair da área de texto de foco. Salve isso. Vamos ver se esse método na área de texto de foco do componente filho está sendo acionado com sucesso pela pontos das notas de exibição do componente pai aqui. Vamos recarregar. Esse método deve ser disparado depois de adicionarmos uma nova nota. Então, vamos digitar alguns textos. Clique no botão. Isso não funcionou e vemos esse erro. Adicionar, editar o valor do ponto ref da nota, área de texto focada em pontos não é uma função. Não é possível encontrar essa função que acabamos de configurar no componente filho. E isso porque quando estamos usando o padrão de configuração de script, precisamos realmente expor todos os métodos que queremos disponibilizar para um componente pai de componentes. Fazemos isso usando o método define expose e passamos para isso um objeto. Nós só queremos adicionar aqui todos os métodos que quiséssemos disponibilizar para este componente pai componentes, queremos disponibilizar o método de área de texto de foco para que possamos adicionar a área de texto de foco aqui. Então, vamos salvar isso e ver se isso está funcionando. Digitando uma nota, aperte o botão. No entanto, isso está funcionando agora, podemos ver área de texto de foco sendo bloqueada. Portanto, nosso componente pai, você percebe que a visualização de pontos está acionando com êxito esse método de área de texto de foco em seu componente filho para editar a visualização de pontos da nota. Então, agora tudo o que precisamos fazer para focar esta área de texto é adicionar outra referência de modelo a esta área de texto e, em seguida, usá-la para focá-la aqui Vamos rolar para cima até o elemento da área de texto. Nesta área de texto ainda tem um teto sobre ela de antes desta nova nota ref bem, esta área de texto não é mais apenas para novas notas. Também será útil editar notas. Vamos renomear isso para a área de texto href, que é um pouco mais genérica, e usaremos esse href para focar a área de texto. Vamos pular para o nosso método de área de texto de foco. Também precisamos configurar uma referência de dados para este modelo bruto com o mesmo nome. Então, queremos fazer a área de texto const HREF, defina que seja igual a um bruto com um valor inicial de nulo. Vamos apenas verificar se estamos importando o método ref de view e não estamos. Vamos adicionar uma seção de entrada na parte superior. Vou importar da vista, saltar de volta para o nosso método. Agora, para obter acesso ao elemento da área de texto, podemos apenas fazer o valor do ponto ref da área de texto. E então, para focá-lo, podemos simplesmente disparar o método de foco. Portanto, concentre-se, diga isso e espero que isso esteja funcionando agora, digite e observe, aperte o botão. Sim, funcionou. Adicionamos a nova nota. Podemos vê-lo na página e também limpamos a área de texto, sem foco também. 88. Personalizado de de de titular, de Placeholder e suportes de etiqueta: Vamos adicionar um novo componente reutilizável na visualização de pontos de edição nope à nossa nova página de notas de edição. Vou pular para ver as notas onde estamos usando o componente Adicionar nota Editar. E eu vou apenas copiar esse fechamento que saltou para a nova visualização, exibir a visualização de pontos nope. E vamos colar isso dentro desta div. E vamos remover todo o conteúdo dinâmico por enquanto. Então, removerei o modelo V, removerei o manipulador de cliques ou o atributo desativado, salvo isso. Agora precisamos importar esse componente antes de poder usá-lo. Vamos adicionar nossas tags de configuração de script. Adicione nossa seção de entradas e inseriremos edição, nota de componentes de barra, barra de notas de barra adicionar, editar, nota, ponto Vue, salve isso. Agora podemos ver esse componente na página. Estou vendo um aviso no console aqui. Estou faltando o valor do modelo de prop obrigatório. E isso ocorre porque esse componente para editar a visualização de pontos da nota está esperando a prop de valor modal ou a prop do modelo V, e isso é definido como uma prop necessária. Vamos configurar uma visualização de ponto de nota de edição Q que podemos vincular a este componente de nota de edição em nossa seção de scripts, muitos comentários novos que dizem Nota. Configuraremos um ref chamado conteúdo da nota. Defina isso igual a um href com um valor inicial de uma string vazia, porque estamos usando o método ref, precisamos importar isso. Então, vamos importar ref da exibição. E agora podemos vincular essa jangada ao nosso componente Add Edit note. Agora podemos adicionar o modelo V. Lembre-se de que tudo o que precisamos fazer é adicionar o modelo V porque já configuramos este componente de nota de edição de anúncios para extrair automaticamente qualquer modelo V que passamos para este componente usando a prop de valor modal, e atualize automaticamente o modelo V, que está no par de componentes usando os eventos de valor do modelo de atualização. Então, tudo o que precisamos fazer agora para espero que o sabão seja apenas vincular este conceito de nota ref a este componente. Então, definiremos esse modelo V para anotar o conteúdo e salvá-lo. E vamos nos certificar de que isso está ligando. Vou colocar algum texto aqui. Podemos ver a atualização na área de texto. Vamos definir isso de volta para uma string vazia e salvá-la. Vamos alterar o texto neste botão aqui mudará esse texto para dizer nota, salve isso. Agora eu gostaria que este cartão que está ao redor da nossa área de texto no botão tivesse uma cor diferente quando estamos na página de edição. Portanto, parece um pouco diferente da área de texto do cartão e do botão que está na página de notas. Se abrirmos nosso componente reutilizável para a visualização de pontos da nota de edição, podemos ver que essa classe no cartão tem sucesso em segundo plano. Podemos mudar essa palavra sucesso para criar cores diferentes. Por exemplo, podemos alterar isso para ter um link de fundo escuro para dar essa cor azul Vamos configurar uma prop sobre esses componentes de visualização de ponto da nota Adicionar Editar para que possamos alterar dinamicamente essa palavra aqui, aqueles que mudam a cor. Vou deixar isso de volta ao sucesso por enquanto e salvarei isso. Agora vamos pular para nossos adereços e vamos configurar um novo suporte chamado cor BG. Vamos definir o tipo como string. Também receberei um valor padrão. Para que, se não fornecermos essa prop em um componente pai, ainda podemos ter uma cor de fundo neste cartão definirá o padrão para sucesso. Vou salvar isso. E agora vamos pular para essa div com a classe de cartas. Vou dividir os atributos sobre isso e vou cortar esse sucesso de fundo da casa, vidro escuro. Vou me vincular ao atributo class. Usarei uma string de modelo aqui usando backticks para que possamos gerar o conceito dessa prop ou colar naquela classe que copiamos tem sucesso em segundo plano, escuro. Vamos apenas nos livrar da palavra sucesso e nossas chaves de dólar e produzir nosso suporte em vez da cor BG. Podemos fazer adereços de ponto BG cor, ou podemos apenas fazer cores VG. Vou salvar essa recarga. E podemos ver que, se não fornecermos esse suporte de cor BG para este componente Adicionar edição sem quando o usamos em um par de componentes, veremos a cor de fundo padrão porque é vai usar esse valor padrão na prop que definimos aqui. Mas devemos ser capazes de substituir essa palavra sucesso fornecendo essa prop para o componente Adicionar nota de edição quando a usarmos em um componente pai. Então, vamos pular para ver a visualização de pontos da nota de edição. Eu sou muito esse adereço para nossa edição Adicionar. Nenhum componente aqui definirá a cor BG, e definiremos isso para vincular, salvá-lo. E agora vemos esse azul 11. E se o inspecionarmos, podemos ver que o cartão, como esta classe tem documento de link em segundo plano. Mas se formos para a página de notas e inspecionarmos esse cartão, podemos ver que a classe tem sucesso em segundo plano, escuro, a cor de fundo está funcionando. Agora, vamos também nos fazer salvar notas, mas também está no mesmo tipo de cor. O caderno salvo e ele está aqui. Então, vamos mudar essa classe também, tem link em segundo plano em vez de sucesso. Salve isso. E agora temos um botão azul enquanto estamos nisso. Vamos desativar esse botão quando esse campo estiver vazio. Novamente sem o atributo desativado condicionalmente somente quando nenhum conteúdo estiver vazio. Então, definiremos isso para não anotar o conteúdo. Salve isso. Esse botão está desativado por padrão, mas se digitarmos algo e ele se tornar ativado novamente, agora também precisamos tornar esse texto de espaço reservado na área de texto personalizável também porque o texto adicionar uma nova nota não faz sentido nesta página. Porque essa área de texto será para editar uma nota ou não adicionar uma nova nota. Vamos adicionar outra prop, adicionar a visualização de ponto de nota de edição para este texto de espaço reservado, que atualmente está apenas codificado na área de texto, configurará uma nova prop chamada espaço reservado. Acontece-se com um tipo de string. Daremos a isso um valor padrão de digamos que digite algo, ponto, ponto, ponto, salve isso. Agora vamos usar essa prop em nossa área de texto. Podemos apenas vincular ao atributo de espaço reservado e, em seguida, emitir essa prop, seja com espaço reservado de ponto de props ou apenas espaço reservado. Vou salvar essa recarga. Agora podemos ver o valor padrão dos tipos de coisas no espaço reservado, mas agora devemos ser capazes de substituir isso passando essa prop de espaço reservado para nosso componente de nota de edição artística quando nós o usamos em uma de nossas páginas, vamos pular para ver, editar nope, ponto view. E adicionaremos este espaço reservado prop, espaço reservado. Poderíamos definir isso para editar, anotar , salvar isso e dizemos isso na área de texto. Agora, se voltarmos para nossa página de anotações ainda é dito digite algumas coisas. Vamos substituir isso também. Então, abriremos o ponto de exibição de notas Vue terá esta prop de espaço reservado aqui também para o nosso componente de nota de edição artística. Portanto, espaço reservado, quase pelo menos para adicionar uma nova nota, salve isso e vemos essa atualização. Eu também gostaria de poder exibir um rótulo na parte superior da nossa área de texto para tornar a função dessa área de texto um pouco mais clara. Primeiro, vamos configurar a marcação para isso. Então, vou pular para adicionar edit app.vue. E na parte superior do nosso elemento de cartão acima deste campo, vou adicionar um rótulo com uma classe de rótulo. Por enquanto, removerei esse atributo for. Vou apenas definir o texto para textos rotulados por enquanto. Salve isso. Vamos fazer isso branco. Então, muita classe de textos brancos para torná-lo branco. E novamente, essas aulas são apenas de Bohmer e eu quero que esse rótulo seja opcional. Então, vamos resolver um outro adereço para isso. Configuraremos um prop chamado label onset não para um tipo de string. E salve isso. E eu só quero exibir esse elemento de rótulo na página se essa prop tiver sido fornecida. Então eu vou dividir os atributos sobre isso, ou podemos apenas adicionar uma diretiva v-if, e só queremos exibir isso se o rótulo prop tiver sido fornecido, você pode fazer v se solicita ponto rotulado ou apenas rótulo vf. Então eu vou salvar isso e vemos que o rótulo desaparecer, já que não estamos realmente fornecendo essa prop rotulada para este Adicionar edição sem componente quando o usamos em nossa página de edição aqui, se adicionarmos isso adereço rotulado aqui, rótulo? Poderíamos definir isso para editar notas, salvá-las e recarregar. Agora podemos ver o rótulo novamente, já que estamos fornecendo essa prop, embora não esteja exibindo o valor que estamos passando aqui, vamos voltar para Adicionar visualização de pontos de nota Editar, e podemos basta exibir o conteúdo desta prop aqui. Podemos apenas substituir textos rotulados chaves duplas e rotulados para salvar isso. E agora vemos notas de edição. E se voltarmos para a visualização de notas e não vermos esse rótulo, já que não estamos fornecendo essa prop rotulada na página de notas de exibição aqui. A razão pela qual acho que precisamos de um rótulo aqui é porque quando o usuário clica em notas de edição, ele não verá uma área de texto vazia aqui. Eles vão ver essa área de texto preenchida com a nota. E então eles não verão esse espaço reservado. Então, isso dará ao usuário um pouco mais de esclarecimentos antes de seguirmos em frente e começarmos adicionar e você chegar à nossa loja de opinião para obter o conteúdo da nota de que o usuário é tentando editar. Adicione uma ação para atualizar a nota. Vamos apenas adicionar um botão de cancelamento aqui, que nos leva de volta à página de notas. Desde agora, não há como o usuário voltar , além de clicar no quadro-negro. Então, o que você deseja visualizar a visualização ponto da nota de edição dentro do nosso slot de botões aqui, vamos apenas adicionar outro botão. Então, vou duplicar esta nota salva. Remova os desativados, prop alterou o texto para advogado. Salve isso. Vou mudar esta classe tem o plano de fundo vinculado a é dash gostado para dar essa cor cinza claro. Agora, há algumas maneiras de enviar o usuário de volta para a página de notas quando ele clicar nisso, uma coisa que poderíamos fazer é converter esse botão em um componente de link de roteador, definir os dois prop para barra, salve isso e veja se isso funciona. Isso funciona. A outra coisa que poderíamos fazer é deixar isso como um botão e adicionar um manipulador de cliques a este clique. E poderíamos usar o método do roteador dólar, porque ainda podemos usar o método de roteador dólar em nossos modelos usando a API de composição. Assim, podemos fazer ponto de roteador de dólar, empurrar, barra para frente, salvar, isso funciona. Sim, isso funciona. Ou se nosso aplicativo fosse mais complicado e tivesse muitas maneiras diferentes de chegar a esta página de edição de páginas diferentes para as quais talvez desejássemos enviar o usuário diretamente de volta de onde quer que eles viessem. Então, para fazer isso, poderíamos apenas fazer parênteses de ponto de roteador de dólar, salvar essa recarga. Isso também funciona. 89. Getter - Obtenha conteúdo de nota (useRoute): Quando o usuário clica neste botão de edição que é levado para esta nova página de notas de edição. E eles vão esperar o texto da nota que eles apenas clicaram neste texto aqui seja carregado nessa área de texto. E podemos fazer isso usando um getter em nossa loja de opiniões. O que vamos precisar fazer, pegar o ID da nota atual de nossos parâmetros de rota, que podemos ver em nossa barra de endereços aqui, ID um e, em seguida, enviar o ID para um getter em nossa loja, que será então recuperar a nota correta das minhas notas estão diretamente em nossa loja com base no ID. Retorne para este componente de nota de edição de visualização, onde podemos atribuí-lo a este conteúdo de notas href, que está vinculado à área de texto, aqueles que preenchem a área de texto com os textos da nota correta. Para começar, vamos configurar um getter realmente simples, que só recebe o conteúdo da primeira nota em nosso array. Vamos pular para o nosso armazenamento de arquivos da loja Node.js. Na pasta de lojas. Vamos rolar para baixo para adicionar algumas suposições. Só precisamos adicionar objetos getters. Depois do objeto dessa ação. Podemos colocar todos os nossos getters aqui. Ele sai. Acabamos de começar uma propriedade com o nome do gueto w1, ou poderíamos chamá-la de obter conteúdo de nota. E então atribuímos essa propriedade a um método como este para que isso obtenha, eu possa ter acesso ao estado dos EUA, precisamos passar o estado para este gueto assim. Getters sempre precisa retornar algo como propriedades computadas. Então, por enquanto, vamos apenas retornar o conteúdo da primeira nota na matriz de notas em nosso estado. Assim, podemos pegar isso de notas de ponto de estado e , em seguida, colchetes 0 para pegar o conteúdo do primeiro ponto de nota, vamos obter o conteúdo desse primeiro nó. Em nossas entranhas. Tudo o que precisamos fazer é retornar notas de ponto de estado, colchetes 0 para pegar o primeiro, colocar conteúdo e salvar isso. Agora devemos poder usar esse getter em qualquer lugar em nosso aplicativo. Então, vamos usá-lo na visualização de pontos Exibir, Editar nota. Precisamos importar nossa loja. Portanto, precisamos importar notas da loja dos EUA de lojas de barras notas da loja de barras. Que precisamos atribuir essas duas constantes para que possamos acessá-las. Muitos comentários novos que dizem loja. Vou configurar uma constante chamada notas da loja. Defina isso igual a usar parênteses de notas de armazenamento. E, na verdade, vamos mover isso um pouco para cima. Vou cortar isso, colar depois de nossas importações. Agora podemos usar o getter em nossa loja para pegar esse conceito da primeira nota e atribuí-lo a esta referência de conteúdo da nota, que mostrou que atualiza a área de texto. Para acessar nosso gueto. Podemos simplesmente fazer pontos de notas da loja e , em seguida, o nome do nosso getter é obter conteúdo da nota. Nós só queremos atribuir isso a esta referência de conteúdo de nota, que possamos apenas fazer o valor do ponto do conteúdo da nota igual a esse. Então, vamos salvar isso agora, recarregar e isso não parece estar funcionando. Vamos dar uma olhada em nosso console, sem ver nenhum erro. Vamos dar uma olhada no nosso arquivo de armazenamento. Apenas certifique-se de que o aplicativo esteja em execução. Ele está executando ajuda se estivéssemos realmente na página de edição. Então, vamos clicar em um botão Editar. Podemos ver que os textos da primeira nota estão sendo carregados nessa área de texto. No entanto, não queremos apenas pegar o texto da primeira matriz de notas. Precisamos ser capazes de pegar o conteúdo das notas com base no ID da nota em que elas acabaram de clicar. Se clicarmos em Editar no segundo nó , esperamos ver esse conteúdo de notas sendo carregado aqui. Podemos pegar o ID que está sendo passado para esta página usando nossos parâmetros de rota que vimos anteriormente, pois podemos dividir isso em nosso modelo usando o objeto de rota dólar. Depois disso, adicione notas de edição, vou adicionar uma pré-etiqueta, chaves duplas e, em seguida, params de pontos de rota em dólar. E, em seguida, o nome do nosso ID de parâmetro. Precisamos passar esse ID para o nosso getter para que isso chegue, eu possa obter o conteúdo para a nota correta. No entanto, precisamos fazer isso em nossa seção de script. E podemos acessar nossas informações de rota na seção de script usando os objetos de rotas de dólar. Quando estamos usando a API de composição, precisamos usar rotas Vue como novas rotas dos EUA compostas. Então, vamos remover essa pré-conversa. Após essa importação aqui, importaremos rota dos EUA do roteador view dash. E então muitos comentários aqui, que dizem apenas roteador. Precisamos atribuir esse usuário composable a constante ou variável. Então, vamos configurar uma constante chamada rotas. Defina isso igual a usar parênteses de rotas. E agora podemos acessar as mesmas informações de rotas que acabamos de dividir antes de usar essa constante de rota. Vamos ver se podemos fazer logout deste parâmetro de rota, este parâmetro ID f. Configuramos este conceito de nota href. Vamos apenas sair do console.log, rotear pontos params dot ID, salvar isso. E, no entanto, podemos ver que o id2 está sendo bloqueado. E se voltarmos para a página de notas, clicarei em Editar na primeira nota e veremos o ID1 sendo bloqueado. Como podemos passar o valor dessa ID para getter? 90. Getter (com parameters) - Obtenha conteúdo de nota: Como podemos passar esse ID para o nosso getter? Você pode pensar que poderíamos apenas iniciar parênteses para r recebe um aqui e passá-lo assim, roteia pontos params ponto ID, salvar isso, depois pular para o nosso arquivo de armazenamento, até r, levanta e talvez além disso em como segundo parâmetro. Podemos ver que isso não funciona. Vemos um erro no console. Notas roubadas não recebem conteúdo não é uma função. Isso porque esse getter não é uma função, é apenas uma propriedade de objeto, portanto, atribuída a uma função. O que podemos contornar isso fazendo obtém um retorno, uma função com o parâmetro pelo qual estamos passando. Vamos nos livrar desse parâmetro ID e nos livrar dessa linha de retorno. O que podemos fazer é apenas retornar uma função de seta como esta. Passe o parâmetro aqui. Então, vamos ver se podemos bloquear isso agora. Console dot log lote de ID de string do Geta dois pontos e , em seguida, dividirá esse parâmetro ID. Então, vou salvar essa recarga. Podemos ver que está funcionando ID do getter ID1. Vemos um aviso aqui, mas não se preocupe com isso. Isso é só porque getter está retornando uma função no momento ou não uma string. Estamos atribuindo isso a esta nota conteúdo href, que está sendo passado para adicionar nota de edição no modelo V, a prop de valor do modelo neste componente está esperando uma string. Então, veremos isso desaparecer quando começarmos a trabalhar aqui. Vamos voltar para armazenar Node.js. E agora podemos usar esse ID para pegar a nota correta sobre essa propriedade de conteúdo da matriz de notas que está em nosso estado. Então, podemos usar o filtro para fazer isso. Dentro desse método aqui, vamos retornar as notas estão corretas, então as notas de ponto de estado. Mas depois vamos filtrá-lo com o método de filtro. Vamos esticar isso um pouco. Isso vai percorrer cada item em nossa matriz. Vamos precisar de um espaço reservado para cada item à medida que ele estiver passando. Então, usaremos a nota para isso. Em seguida, adicionamos outra seta. As pessoas devem especificar nossos critérios para as notas que queremos pegar. E queremos cortar as notas em que a propriedade ID é igual à propriedade ID que estamos transmitindo aqui na nossa página de nota de edição, queremos retornar notas onde o ID é igual a ID. Como todas as nossas IDs serão únicas, isso retornará uma matriz contendo apenas denota o objeto que estamos procurando. Como isso vai ser uma matriz, precisamos pegar o primeiro e único item da matriz adicionando colchetes 0. E então, a partir disso, queremos soltar a propriedade conceitual para que possamos apenas fazer conteúdo de pontos. Vamos salvar isso e ver se isso está funcionando. Recarregue a página. Não notei slash id um. E estamos vendo o conceito a partir das notas com um ID de identificação um. E se voltarmos para a página de notas, clique em Editar na segunda nota, então veremos o conteúdo da segunda nota com id2 sendo carregado na área de texto. 91. Ação - Nota de atualização: Quando o usuário fizer uma alteração nessa nota e clicar em Salvar, queremos atualizar a propriedade de conceito da nota correta em nosso estado com o novo conteúdo que ele digitou. Primeiro de tudo, vamos apenas acionar um método local. Quando clicarmos no botão Salvar, vou pular para ver a nota de edição ponto Vue, removendo este log do console aqui. Vamos pular para nossos cadernos salvos em célula animal. Indo adicionar um pouco de margem entre esses botões é na verdade, no botão do console permitido. Três, digamos que talvez dois. E parece um pouco melhor. Agora vamos adicionar um manipulador de cliques a esses cadernos salvos no. Portanto, clique igual acionará um método chamado handle save clicado. E vamos criar esse método. Muito novo comentário aqui que diz Salvar clicado, configura nosso método handle save cliced sub I igual a uma função de seta. Basta sair. Manuseie salvar, clicou por enquanto, salve isso, clique no botão. Podemos ver que está sendo bloqueado. Vamos acionar uma ação em nossa loja neste momento para atualizar as notas e as notas estão bem no estado. Que informação essa ação vai precisar para fazer isso? Bem, ele vai precisar do ID da nota para que possamos descobrir quais notas na matriz serão realmente atualizadas. E também vai precisar da nova cadeia de conteúdo também. Portanto, há algumas maneiras de passar essas informações para uma ação em nossa loja. Para que pudéssemos configurar um objeto. Poderíamos chamá-lo de carga útil ou algo assim. Poderíamos adicionar algumas propriedades a esse ID, que podemos obter novamente de nossas promessas de rota. Portanto, roteia o ponto params dot ID e, em seguida, uma propriedade de conceito que podemos simplesmente pegar deste conteúdo de nota href, que está vinculado à área de texto. Portanto, observe o valor do ponto do conteúdo. E então poderíamos passar toda essa carga como um único parâmetro para uma ação repleta de UX. Essa era a única maneira que poderíamos fazer isso porque as ações na UX só podem aceitar um parâmetro. No entanto, as eleições no Quênia podem realmente aceitar vários parâmetros. Então, a outra maneira de fazer isso é apenas enviar o ID no conteúdo como dois parâmetros separados. Nesse caso, acho que devemos fazer isso dessa maneira porque isso deixará nossa ação um pouco mais clara porque poderemos dizer exatamente o que está sendo passado aqui. Então, vamos configurar essa opção criará uma nova ação chamada Data do livro. Observe que isso receberá um parâmetro ID, o parâmetro de conteúdo r. Vamos bloqueá-los. Vou Logout ID. Em seguida, vamos desconectar o parâmetro conceitual também. Salve isso. Agora vamos acionar o oxigênio aqui e nossa ação será em notas de roubo, pontos, atualização, nota, porque este é o nome que demos nossa ação aqui. E isso esperará um parâmetro ID no parâmetro conceito. Então, o ID que vamos retirar de nossos parâmetros de rota, as rotas interrompem a ID do ponto de Ram. E então o conceito que vamos pegar desse conteúdo de nota href, que está vinculado à área de texto. Assim, podemos obter isso a partir do valor do ponto do conteúdo da nota. Agora vamos salvar isso e ver se esses dois parâmetros estão chegando a essa ação. Recarregue, altere o conteúdo, clique em Salvar. E, no entanto, podemos ver aqueles sendo bloqueados por nossa ação. Você pode ver o id sendo bloqueado no conteúdo atualizado sendo bloqueado também. Agora só precisamos atualizar as notas corretas em nosso estado. E uma maneira de fazer isso é primeiro descobrir o índice ou a posição das notas em nossa matriz usando o método find index. E então podemos simplesmente atualizar as notas à nossa direita nessa posição e atualizar a propriedade de conteúdo. Primeiro de tudo, vamos pegar o índice das notas que queremos atualizar. Então, configurarei uma variável chamada index. E então vamos disparar o método bind index em nossas notas estão corretas. E podemos chegar ao nosso array de notas nessas notas de ponto. Assim, podemos fazer essas notas de pontos, encontrar pontos, índice. E, novamente, usaremos as notas como nosso espaço reservado à medida que elas estão percorrendo nosso array. Defina isso igual a uma função de seta. E queremos retornar o índice da nota em que o ID da nota é igual a essa ideia de que estamos passando para essa ação igual a Id. E na verdade eu acho que podemos atirar nisso nele removendo esses aparelhos encaracolados e a palavra retornar. Vamos ver se isso funciona. Além disso, farei o mesmo com este filtro aqui, posso mostrar isso removendo os parênteses, retornarei neste parênteses de fechamento, já que estamos disparando apenas uma linha aqui. Então, vamos fazer logout desse índice e ver se isso está funcionando. Índice. Salve isso, recarregue a página e altere-a e clique em Salvar. Podemos ver que o índice é, está definido como um aqui, o que está correto porque essa é a nossa segunda nota. Se voltarmos para a primeira nota, faça uma alteração e clique em Salvar. Deixe-me ver o índice 0 sendo desconectado. Ok, então agora que temos o índice das notas que queremos atualizar e nossa matriz de notas, agora podemos atualizar a nota. Então, vamos rolar para baixo até nossa ação de atualização. Vou me livrar desses console.logs, notas de acesso, array. Podemos apenas fazer essas notas de ponto. E então, para acessar as notas na posição do índice, podemos apenas fazer índice de colchetes. Em seguida, queremos acessar a propriedade concept e defini-la para esse conteúdo que estamos passando para essa ação. Portanto, defina isso igual ao conteúdo e remova esse log do console. Vamos ver se isso está funcionando. Então, vou recarregar, fazer uma mudança novo conceito. Clique em Salvar. Agora, se clicarmos em cancelar, podemos ver que a primeira nota foi atualizada com o novo conteúdo. Vamos nos certificar de que funciona na segunda nota também, clique em editar algum novo conteúdo, clique em Salvar, clique em cancelar. Este nó também foi atualizado. No entanto, quando o usuário clicar em Salvar neste botão, não queremos deixá-lo nesta página. Nós realmente queremos redirecioná-los de volta para a página de notas. Vamos fazer isso em seguida. Mas antes de seguirmos em frente, acabei de perceber que há outra declaração de retorno aqui que podemos abreviar. Vou remover essa chave em nossa ação de anotação de exclusão no retorno. E eu não removo o suporte curly de fechamento também. Vamos dar uma olhada na nota ímpar. Esse está bem como está. Vamos salvar isso. 92. Use Router - Redirecionar a página anotações: Vamos redirecionar o usuário de volta para a visualização de notas. Depois que esta nota tiver sido salva. Vamos pular para ver a visualização de pontos da nota de edição. Precisamos fazer isso em nossa seção de script. Depois desta linha. Na API de opções, poderíamos apenas fazer esse roteador de ponto dólar. Então não empurre e empurre-os para a barra do caminho. Enquanto estiver na API de composição, isso não funcionará. Então, vamos nos livrar disso. E precisamos importar o roteador dos EUA composable do Vue Router. Vamos subir para o topo aqui onde estamos importando a rota de uso. Podemos começar a usar o roteador que precisamos atribuir a isso uma constante antes de poder usá-lo. Assim, podemos fazer isso depois de configurar, usarei a constante de rota. Podemos apenas fazer um const, usar. As rotas Const são iguais a usar roteador. Agora podemos acessar toda a rota usual. Então, métodos como Porsche e substitua de volta usando essa constante. Então, agora, para lidar com o método clicado salvo. Depois de atualizarmos a nota, podemos apenas fazer push de pontos do roteador, enviaremos de volta para a página de notas, que está na barra do caminho. Vamos salvar isso e ver se isso está funcionando. Recarregar a página, alterado, o conteúdo, pode economizar, mas estamos de volta à lista de notas. Podemos dizer que um nó foi atualizado. 93. Página de mais Getters e Estatísticas: Para demonstrar ainda mais que nossa loja de opiniões, loja Node.js pode ser usada em qualquer lugar dentro do nosso aplicativo. Vamos criar uma nova página, uma página Stats, que na verdade já configuramos uma página em uma rota para isso. Nesta página, vamos exibir uma tabela que exibe algumas informações sobre nossas anotações. Vamos exibir o número total de nós que temos e também o número total de caracteres de todas as nossas notas combinadas. Mas antes de configurar esta página Estatísticas, notei que esse menu móvel não está desaparecendo quando clicamos para ir para uma nova página. Vamos corrigir rapidamente primeiro Barra suficiente é um layout de componentes de origem e Navbar? Vamos rolar para baixo até a seção de script. Este show mobile enough ref é o que está determinando se o menu móvel é mostrado ou não . Se eu mudar isso para true, podemos dizer que o menu móvel é mostrado por padrão. Vou deixar isso de volta para falso. E então o que poderíamos fazer é apenas nos certificar de que definimos isso de volta para false sempre que um dos nossos links no menu móvel for clicado. Então, vamos pular para links do roteador A2 aqui, notas e estatísticas. E podemos simplesmente adicionar um manipulador de cliques a ambos. Vou fazer uma seleção múltipla aqui. Coloque meu cursor aqui ao lado do link de rotas de palavras. Mantenha pressionada a tecla Alt e , em seguida, coloque outro cursor ao lado desta tag de abertura do link do roteador, pressione Enter. Tenho permissão para clicar no manipulador e vamos definir esse show mobile nav de volta para false. Assim, podemos apenas mostrar o celular agora igual a false, salvar essa recarga e espero que este menu móvel desapareça quando mudarmos de páginas, e isso acontece. Então, vamos usar o componente de tabela Ballmer para exibir alguns dados sobre nossas anotações. Vamos apenas configurar a marcação para isso primeiro, fecharei esses módulos de arquivos para pedir pontos, visualizações de página, visualização, estatísticas, visualização de pontos. Para adicionar uma tabela com alguns estilos agradáveis, só precisamos adicionar uma tabela normal com uma classe de tabela. Vamos criar uma tabela com uma classe de tabela dentro dessa sem elemento cabeça T no nosso elemento de corpo. E então, em nosso elemento de cabeça T sem uma linha. Então TR, linha de tabela. Estou dentro disso. Vamos adicionar algumas células Th, células de cabeçalho de tabela. No primeiro, vou colocar o cabeçalho parado, duplicar isso. E então, no segundo cabeçalho da tabela, vou apenas puxar valor, salvar isso. E agora podemos ver nossa linha de cabeçalho da tabela isso. Então, em nosso corpo, adicionaremos uma linha de tabela no interior que adicionará algumas células de dados da tabela TDS. No primeiro, queremos colocar o nome de nossas estatísticas. Então, vou colocar um número de notas. E então, na segunda célula, vamos exibir o número real de notas, mas por enquanto colocaremos XXX e duplicarei essa linha da tabela e seguiremos o nome. Vou colocar o número de caracteres, parênteses de todas as notas. Digamos que, para tornar esta tabela de largura total, podemos simplesmente adicionar uma classe à tabela de é traçado de largura total do traço. Esta é apenas outra classe anterior, digamos, mas na verdade eu acho que a largura total é uma palavra. Então, vamos nos livrar desse traço, salvar isso. E agora temos uma tabela de aparência bastante decente onde podemos exibir essas estatísticas. Então, primeiro vamos configurar um getter para exibir o número de notas aqui. Então, vamos pular para nossas lojas de fontes de arquivos de loja roubou notas dot js, pular para nossos getters em uma vírgula e adicionar um novo Get up. Assim, poderíamos chamar essa contagem total de notas igual a uma função de seta, passar no estado. Queremos devolver o número total de notas em nossas notas diretamente em nosso estado. Então, para acessar a matriz de notas, podemos fazer notas de ponto de estado. Assim, podemos simplesmente retornar notas de ponto de estado. E então, para obter o número de itens na matriz ou o comprimento da matriz, podemos apenas fazer o comprimento do ponto. Salve isso. Vamos voltar para a vista de pontos View Stats. Agora precisamos importar nossa loja. Então, vamos definir nossas tags de configuração de script em um comentário que diz entradas. E vamos importar notas da loja dos EUA de notas da loja de barras da barra que precisamos atribuir isso a uma constante. Ótimo, outro comentário aqui em start const, as notas da loja são iguais a usar notas da loja. Agora devemos ser capazes de usar nosso getter. Então, vamos substituir este primeiro XXX após o número de notas por chaves duplas e armazenar notas. Como chamamos isso? Contagem total de notas. Então ainda as notas totais de pontos de notas contam. Salve isso e agora vemos essa atualização para dois. E nós temos duas notas. Se adicionarmos outra nota, talvez mais algumas. Volte para a página de estatísticas. Isso agora diz Para, você pode ver que podemos usar facilmente tudo o que está em nossa loja, qualquer lugar dentro do nosso aplicativo e todos os dados em nossa loja e todos os resultados de nossos getters são sempre mantidos atualizados em tempo real, independentemente de onde vamos dentro do nosso aplicativo. Agora isso configura mais um getter para pegar o número de caracteres de todas as notas. Não tenho certeza se o número de caracteres apenas muda isso. Vamos pular para nossa loja novamente, adicionar um novo getter e chamaremos isso de contagem total de caracteres em uma função de seta. Passe no estado. Agora vamos ter que percorrer cada nota que está em nossa matriz de notas para descobrir o número total de caracteres de todas as notas. Poderíamos apenas configurar uma variável para contar isso. Criarei uma variável chamada conjunto de contagem igual a 0 por padrão. E então vamos apenas percorrer nossas anotações, à direita, o comprimento do conteúdo de cada uma, e depois adicionaremos esse comprimento a essa variável de contagem e, em seguida, basta retornar essa variável de contagem no final. Então, poderíamos usar um para cada um para fazer isso. Para pegar nossa matriz de notas, podemos apenas fazer notas de ponto de estado que podemos usar um para cada método para percorrer cada nota nesta matriz enquanto ela está percorrendo e está olhando para cada uma, vamos precisar de um espaço reservado. Então, vamos usar a nota para isso e, em seguida, adicionaremos uma função de seta. Isso vai olhar para o primeiro nó e atribuí-lo a este titular do local da nota. Assim, podemos simplesmente soltar o conteúdo, de ponto não, o conceito de ponto. E então, para obter o comprimento dessa corda, podemos apenas fazer o comprimento do ponto. Em seguida, podemos adicionar o resultado disso a essa variável de contagem. Podemos apenas contar mais iguais assim. E quando terminar, olhando para o primeiro item, ele saltará para o segundo item e, ele saltará para o segundo item em seguida, pegará o comprimento da próxima propriedade de conceito e apenas continuará adicionando a essa variável de contagem até que seja passou completamente pela matriz. Então, no final, podemos simplesmente retornar essa variável de contagem. Então, vamos apenas retornar contagens, salvar isso, recarregar a página. Ou precisamos realmente usar esse getter, que chamamos de contagem total de caracteres. Só vou copiar esse nome. Pule para visualizar, iniciar e iniciar, selecione este XXX chaves duplas. E então, para usar nosso gueto, podemos simplesmente armazenar cargas, pontos, contagem total de caracteres, salvar isso. Agora vemos essa atualização. Se saltarmos para a página de notas, edite uma de nossas notas. Salte para trás. Poderíamos dizer que esse valor agora está aumentado. Se excluirmos todas as nossas notas, vá para a página Estatísticas. Agora vemos que temos 0 nós em 0 caracteres totais. 94. Directiva - Autofocus [Módulo 17]: Vamos adicionar uma diretiva personalizada a isso. Uma coisa que poderíamos fazer é criar uma diretiva personalizada que focalize automaticamente essa área de texto quando a página é carregada, que o usuário pode começar imediatamente a digitar e você anota sem ter que clicar nela. Primeiro de tudo, vamos apenas resolver uma diretiva personalizada local dentro deste componente Adicionar nota de edição. Não estou dizendo que componentes de origem, notas e notas de edição irão para a seção de script. Vou pular para o fundo. Vamos adicionar um novo comentário em bloco aqui, que diz diretivas. Você se lembra de como adicionamos uma diretiva costeira local? Sinta-se à vontade para pausar o vídeo, veja se você consegue se lembrar de como fazê-lo. Mas o que fazemos é criar uma constante e precisamos garantir que o nome dessa constante comece com um v minúsculo e está em CamelCase. Então poderíamos chamar esse autofoco veia. Definimos isso igual a um objeto e poderíamos adicionar quaisquer ganchos que quisermos aqui, como criado, vamos usar montado e definimos isso igual a um método como este, e podemos passar o parâmetro L aqui . Este parâmetro l nos dará acesso ao elemento assim que ele for montado como um no elemento ao qual adicionamos esta diretiva de foco automático V. Podemos então focá-lo com foco de ponto L. Agora podemos simplesmente adicionar essa diretiva a qualquer elemento focalizável que esteja neste componente. Então, vamos adicioná-lo à nossa área de texto, que está aqui. Lembre-se de que precisamos mudar o nome que usamos aqui de CamelCase para caixa de traço. Não podemos isso como este foco automático v dash. Salve isso. E se recarregarmos esta página, podemos ver que a área de texto é focada automaticamente sem que precisemos clicar nela. Como esse componente de notas de edição de arte é um componente compartilhado que também é usado na página de edição. Também deve funcionar aqui também, o que funciona. Também podemos ver a área de texto focada automaticamente aqui. 95. Diretiva global - Autofocus: Agora vamos supor que temos uma entrada na página Estatísticas. Vamos pular para as estatísticas Page, Source, Views, view, stats dot view. E vou recolher nossa tabela e adicionaremos uma entrada depois disso. E definirei o tipo para textos e daremos a isso um espaço reservado. Você ama? Bolas não. Salve isso e vá para nossa página de estatísticas para fazer com que isso pareça um pouco mais bonito. Muita classe de entradas, que é de Bohmer. Isso é melhor. Digamos que também queremos focar automaticamente esse impulso quando esta página for carregada. Bem, isso não vai funcionar atualmente. Se adicionarmos esta diretiva de focagem automática aqui, salve-a e recarregue. Se olharmos para o nosso console, poderemos ver um erro. Não é possível ler propriedades de leitura indefinida em profundidade. Isso porque esse foco automático em V não existe dentro do contexto desta visualização de componentes, a visualização de ponto de estatísticas só existe no componente Art edit notes dot Vue, onde o configuramos aqui. Vamos voltar para ver a visualização de pontos das estatísticas. Remova esta diretiva de foco automático V, salve-a e volte para nossa página de anotações e adicione a visualização de pontos de edição nope. E vamos fazer desta diretiva uma diretiva global que podemos usar em qualquer lugar. Então, antes de tudo, vamos criar uma nova pasta em nossa pasta de origem onde todas as nossas diretivas possam viver. Então, vou clicar com o botão direito do mouse na pasta de origem, clicar em Nova pasta e criar uma pasta chamada diretivas. Dentro disso, vamos criar um novo arquivo chamado autofocus dot js. Podemos muito bem dar a ele o mesmo nome que nosso nome constante. Agora vamos pular para adicionar edição nope dot view, selecione essa constante e corte-a. E também vamos remover esse comentário e salvá-lo. Agora vamos pular para um novo arquivo de foco automático V e colar diretiva em tudo o que precisamos fazer é exportar isso, que ele pode ser importado de nossos componentes. Então, podemos começar as exportações por isso, salvar isso. E agora, se saltarmos para adicionar edit self.view, podemos simplesmente importar essa diretiva. Então, vamos pular para nossas entradas e podemos simplesmente importar chaves curly V autofocus a partir de diretivas de barra cortando o foco automático. Salve isso. Agora só precisamos de acrescentar a directiva à área de texto, o que já fizemos. Portanto, esperamos que isso esteja funcionando agora e podemos ver quando recarregamos a página ainda é o foco automático é a área de texto, exceto agora que está usando essa diretiva global que criamos. Então, vamos usar a mesma diretiva global em nossa página de estatísticas. Vamos pular para ver a visualização de pontos das estatísticas. Precisamos importar a directiva. Então, vou saltar de volta para Add Edit note dot Vue. Copie a instrução de importação, pule para ver a visualização de pontos de estatísticas, cole-a aqui, salve isso, e agora podemos usá-lo aqui também. Então, vamos adicioná-lo a essa entrada que acabamos de criar. Então V dash também se concentra, salve isso, recarregue e podemos ver essa entrada na página inicial agora é focagem automática também. 96. Assista ao número de personagens (Watch): Vamos adicionar um observador a isso. Digamos que na nossa visualização de página de notas, vista de pontos de notas, queremos observar o número de caracteres que estão sendo inseridos nesta área de texto. Ou, em outras palavras, o número de caracteres nesta nova referência de nota que está na visualização de pontos das notas. E se isso chegar a 100 caracteres, queremos mostrar uma elipse. Vamos adicionar um observá-la para fazer isso na visualização de pontos de notas de visualização. Então você se lembra de como adicionamos um observador? Isso mesmo. Primeiro, precisamos importar o método de exibição do relógio e, em seguida, usamos esse método de relógio. Na parte inferior aqui, vou adicionar um novo comentário que diz assistir. Os personagens usarão esse método de relógio. O primeiro parâmetro são os dados que queremos assistir, e queremos assistir a esta nova nota, href, podemos apenas passar novas notas como o primeiro parâmetro. O segundo parâmetro é um método de retorno de chamada de método que será acionado sempre que essa propriedade de dados especificada aqui for alterada, se quisermos, podemos passar o novo valor no valor antigo aqui. Vamos apenas trancar isso. Então, faça logout de um novo valor e, em seguida, um novo valor vírgula. Então vou duplicar isso e faremos logout do valor antigo. Salve isso, recarregue. Se mudarmos os textos, podemos ver o valor antigo e o novo valor sempre sendo bloqueado. Agora, na verdade, não vamos precisar do valor antigo aqui. Vou me livrar disso e me livrar desses registros. Se o comprimento do caractere desta nova referência de nota chegar a 100, mostraremos uma elipse. Podemos apenas adicionar uma instrução if para fazer isso. Assim, podemos fazer se você valorizar o comprimento do ponto para obter o comprimento do novo valor é igual a 100, então podemos alertar alguém, acendeu apenas 100 caracteres permitidos. Deus, dane-se. Se eu recarregar. E só para facilitar o teste, vou pular para a área de texto subjacente, que está nas notas dos componentes de origem na visualização de ponto da nota de edição ímpar. Vou apenas adicionar um atributo max length a este conjunto que é 100. Vamos testar isso. começar a digitar nesta área de texto. Quando chegamos a 100 caracteres, vemos os alertas. Podemos dizer que nosso observador está funcionando. 97. Composable - useWatchCharacters: Agora vamos supor que queremos ter a mesma funcionalidade de caracteres de relógio em nossa página de estatísticas nesta entrada. Bem, poderíamos simplesmente copiar esse código de relógio, colá-lo na visualização da página Stats, exibição de pontos de estatísticas e, em seguida, basta ajustar a propriedade de dados que estamos assistindo aqui. Bem, então estaríamos duplicando código. Seria ruim colocar esse observador em seu próprio arquivo composable, que podemos usar em todos os lugares. Então, vamos fazer isso. Vamos pular para o nosso explorador. E queremos colocar nosso composable em uma pasta chamada usar dentro da pasta de origem. Vamos clicar com o botão direito do mouse em fonte e escolher Nova pasta. Crie uma pasta chamada use que dentro que criará um novo arquivo chamado US watch characters ab.js. Para configurar um composable, só precisamos exportar uma função com o mesmo nome do nosso arquivo. Use personagens do relógio. Assim. Vamos voltar para ver as notas ponto Vue. Acabei de pegar esse observador. Pule para o nosso composable e cole isso aqui. Na verdade, sou backhaul Snopes dot view. Agora podemos remover o método de relógio que estamos importando. Salve isso, volte para usar personagens do relógio. E precisamos importar esse método de relógio aqui. Vamos apenas adicionar entradas, assistir da vista. Agora, para tornar esse composable genérico, precisamos ser capazes de passar a propriedade data que queremos assistir como um parâmetro. Então, vamos aceitar isso aqui. Então, poderíamos chamar esse valor para assistir ou algo assim. O que quer que estejamos passando aqui é o que queremos assistir aqui, vamos mudar novas notas para valor para assistir e salvar isso. E agora devemos ser capazes de usar esse impossível para assistir o número de caracteres de qualquer propriedade de dados dentro do nosso aplicativo. E então mostre esse alerta se ele atingir 100 caracteres. Então, vamos pular para ver a visualização de pontos das notas, e precisamos importar esse composable. Portanto, as entradas usam caracteres de relógio. Na barra de usuários de barra, USE caracteres de relógio. Diga isso, vamos pular para nossa página de anotações. Salte para baixo. Não devemos ser capazes de usar este composable para assistir a esta nova nota href, que está vinculada à área de texto. Podemos usar personagens do relógio e depois passar no rack que queremos assistir. Nova nota, nota, salve isso. Vamos ver se isso ainda está funcionando. Ainda está funcionando. E agora também devemos poder usar a mesma funcionalidade em nossa página de estatísticas. Então, vamos pular para nossa página de estatísticas. Vistas, vista, Parar, Parar vista. Novamente, precisamos importar esse composable. Vou apenas copiar a linha de entrada da vista. Nota stop View. Cole isso aqui. E agora devemos poder usá-lo na página de estatísticas também. No entanto, não temos uma configuração de propriedade de dados para essa entrada aqui. Então, vamos apenas configurar isso. Muitos comentários aqui, que dizem que bolas de notas de amor quase configuram um href. Então, const, bolas de notas de amor é igual a um href com um valor inicial de uma string vazia, e precisamos importar ref de view. Vamos adicionar isso à referência de entrada superior da exibição. Agora vamos vincular essa jangada à entrada. Aqui está a entrada. Modelo V. Defina as bolas de notas muito baixas. Salve isso. Vamos apenas alterar esse valor padrão para ver se ele está conectado. No entanto. Foi tudo o que precisou. Agora devemos ser capazes de assistir os caracteres nessa entrada. Então, novamente, podemos usar personagens de relógio passando o naufrágio que queremos assistir, que é amor, não, bolas, amor, bolas de notas. Santo isso. Espero que possamos ver a mesma funcionalidade aqui. Sim, está funcionando. 98. Composable - Vários parâmetros: Vamos tornar nosso uso de personagens do relógio composable um pouco mais flexível. Então, no momento, o alerta sempre será disparado quando o comprimento dos caracteres atingir um 100. Mas digamos que queremos ser capazes de ajustar o número de caracteres em que esse phi está. Digamos que na página de notas queremos descobrir isso 100 caracteres. Mas na página de estatísticas nesta entrada, queremos encontrar isso até 50 caracteres. Bem, poderíamos fazer isso adicionando outro parâmetro para usar a função raiz de caracteres de observação aqui. Vamos adicionar um segundo parâmetro aqui chamado max jars. Podemos passar o mesmo quando usamos este composable em nossos componentes em nossa instrução if aqui, vez de se NewValue gostado for igual a 100 será feito se o novo valor comprimento do ponto for igual a caracteres máximos, eu vou substitua caracteres máximos de 100 largura, e também enviaremos esse número em nosso alerta também. Vou mudar isso para uma string de modelo. Vou substituir os aparelhos encaracolados de $100 que tenho permissão para colocar este máximo de caracteres. Vamos obter esses parâmetros de jars definidos um valor padrão caso ele não tenha sido fornecido. Poderíamos fazer isso apenas definindo caracteres máximos igual a 100. Salve isso. Como não estamos fornecendo o parâmetro máximo da criança na página de notas, isso deve funcionar como antes. Ao disparar os alertas são 100 caracteres. Vamos apenas testar isso. No entanto, ainda não está trabalhando com 100 caracteres. Digamos que na nossa página de anotações, queremos apenas usar a funcionalidade padrão com 100 caracteres. Mas na nossa página de estatísticas queremos que os caracteres máximos tenham 50 caracteres. Não vamos ver a página de estatísticas na sacudida para ver a visualização de pontos das estatísticas. Vamos rolar para baixo até onde estamos acionando nosso composable, passando o segundo parâmetro de 50. Agora vamos salvar isso. Recarregar. Isso deve ser disparado um pouco mais cedo agora com 50 caracteres, diz que apenas 50 caracteres são permitidos. Caramba, dane-se. E assim nosso composable agora é muito mais flexível e útil. E é claro que poderíamos torná-lo mais flexível com parâmetros adicionais, etc Agora, para um composable simples como este, que contém apenas um observador, então faz sentido apenas importar o composable e apenas dispare a função composable root como estamos fazendo aqui. Mas para mais complicado, composable, que contém um monte de coisas diferentes, como dados, métodos, propriedades computadas, etc. Então, faz mais sentido extrair apenas as coisas que precisamos do composable usando a estruturação. E para um lembrete de como fazemos isso com composable mais complexo, volte para o Módulo 11. O módulo composable. 99. Clique em Composable (VueUse, Refs de modelos): Criamos um composable personalizado, mas também vamos adicionar um composable da biblioteca de visualizações. E se olharmos para o nosso menu móvel aqui, atualmente a única maneira fechar isso é clicando no x. Não podemos fechá-lo clicando fora dele, como normalmente esperaríamos. Então, vamos usar um dos composable da biblioteca de uso de exibição para resolver essa floresta. Vamos pular para ver use.org. Comece a usar. Precisamos instalar isso primeiro. Vamos falar com nosso terminal. Mate. O processo de morte executará esse comando para instalar o uso do Vue. Não terminei, então vamos relançar nosso aplicativo com o npm run dev. No lado da vista, vamos para funções do menu, sentidos. Vamos usar isso onclick fora composable. Então, vamos clicar nisso. Podemos ver um exemplo aqui. Podemos abrir um modal. Podemos fechá-lo com o botão X, mas também podemos fechá-lo clicando em qualquer lugar fora do modal. Então, vamos esconder o terminal aqui. Feche todos os nossos componentes. Abra o layout dos componentes de origem navbar, Napa. Vejamos o código de exemplo aqui. Precisamos importar o onclick fora composable do uso da exibição. Então, vamos copiar essa linha para nossa seção de relatório aqui. Podemos ver neste exemplo aqui que precisamos configurar um modelo REF que destrói para o elemento antes que possamos usar isso. Então, vamos descobrir o elemento de menu suficiente, que está aqui, esta div com uma classe de menu de traço navbar. Vamos adicionar um ref a isso. Poderíamos chamar esse menu navbar ref ou algo assim. Vamos pular para a seção de script. Muitos comentários aqui dizem que clique fora para fechar. Precisamos configurar nosso modelo href. Podemos ver neste exemplo aqui. Criaremos uma constante com o mesmo nome do nosso ref, que é para onde ela foi? Chega, menu de bomba ref. Então const navbar, menu ref dt é igual a ref com um valor padrão de null. Agora podemos usar esse composable. Então, vamos copiar esta linha aqui. Cole isso aqui, altere o alvo para este href aqui. Então eu vou copiar isso, colar isso lá, salvar isso. E vamos mostrar o menu móvel. Limpe o console e clique fora de algum lugar. E pudemos ver os objetos de eventos sendo bloqueados aqui. Então isso parece estar funcionando. Mas não queremos apenas sair do objeto de evento. Então, vou selecionar tudo isso e adicionar chaves e adicionar uma nova linha no meio. Este Show Mobile Nav ref determina se o menu móvel é mostrado ou não. Então, podemos simplesmente definir isso de volta para false. Depois de clicarmos do lado de fora. Neste método externo onclick, podemos apenas fazer o valor Show Mobile Nav igual a false. Vou remover o objeto do evento daqui porque não vamos precisar disso. Salve isso e vamos ver se está funcionando. Mostre o menu. Clique no exterior. Vemos que ele desaparece. No entanto, agora não está fechando o menu móvel quando clicamos no X. Vamos ver se podemos corrigir isso. Vamos pular para esse botão, que está aqui. Acho que vejo o que está acontecendo aqui. menu móvel está atualmente mostrando o que clicamos no botão hambúrguer. Porque isso está fora do menu móvel. Ele está acionando o evento externo onclick ao configurar Show Mobile Nav de volta para false ao ocultar o menu móvel. O que chamamos. Também temos esse manipulador de cliques no botão hambúrguer. Isso está disparando esse código, que definirá o show mobile nav para o oposto de si mesmo. Este ponto vai defini-lo de volta para verdadeiro. Se saltarmos de volta para a documentação externa onclick e rolarmos um pouco para baixo, podemos realmente adicionar um objeto de opções como um terceiro parâmetro após o destino, o manipulador, onde podemos ter isso opção ignorar para dizer ao composable quais elementos ignorar a funcionalidade externa onclick. Poderíamos apenas fazê-lo ignorar todos os cliques neste hambúrguer navbar. Agora precisamos configurar um modelo ref primeiro para este agar bob. Vamos adicionar um ref a este colono T2 nav bar, burger ref. Salve isso. Precisamos configurar o ref de dados para isso aqui, vou duplicar este. Altere isso para custo navbar burger ref. Então, nesta função externa onclick, após nossa função de manipulador, podemos adicionar vírgula e em seguida, um objeto que dentro do qual não podemos ignorar a opção. Defina isso igual a uma matriz, passe no modelo ref resolver todos os elementos que queremos que este composable ignore. Então, vamos passar neste mendigo da barra de navegação F, colar isso lá dentro, salvar isso. Vamos ver se isso foi corrigido. Clique no botão. Ainda podemos fechá-lo clicando no X. Vamos ver se ainda podemos clicar do lado de fora para fechá-lo. E sim, podemos. 100. Excluir design modal (Objeto reativo): Ok, então nosso aplicativo está basicamente completo. Nisto, cobrimos quase tudo o que abordamos nos módulos anteriores. Há apenas mais uma coisa que eu quero adicionar, é um modal que é exibido quando clicamos no botão Excluir para solicitar a confirmação do usuário antes que a nota seja excluída. Os motivos pelos quais eu quero adicionar isso são o número um, isso nos permitirá adicionar objetos reativos ao nosso aplicativo, que ainda não usamos. Número dois, nos permitirá usar alguns ganchos de ciclo de vida que ainda não usamos. Número três, nos ajudará a solidificar nosso conhecimento de dados sobre eventos entre componentes pai e filho usando props, emits, valor do modelo e atualização do valor modal. E acho que é uma boa ideia rever essas coisas pai-filho novamente, porque esses conceitos podem ser bastante confusos, mas eles são realmente K para criar aplicativos de API de composição sólida. Primeiro, vamos criar um novo componente para o nosso modal. Vou pular para componentes de origem, notas. E eu não quero criar um novo arquivo nesta pasta chamado modal Excluir Nota ponto view. Por enquanto, só vou destacar tags de modelo lá. Dave. Vou apenas colocar os textos. Isso é um modal. Salve isso agora em nossa visualização de pontos da nota do componente de notas. Vamos pular para isso. Notas de componentes. Não, vista de pontos. Vamos adicionar objetos reativos onde a propriedade para determinar se esse modal é mostrado ou não. Vou importar a revisão de ref, então adicionarei isso aqui. Então eu vou rolar para baixo até o fundo. Vou adicionar um comentário em bloco que diz modais. Vou configurar novos objetos reativos chamados modais. Modais são iguais a reativos, reativos que precisamos importar da visualização, não href. Vamos substituir isso por reativo. Passando o objeto. E vou adicionar uma propriedade chamada Delete Note Set ponto igual a false. Essa propriedade determinará se o modal é mostrado ou não. Se for falso, não mostramos. E se for verdade, então mostramos isso. A razão pela qual eu usei um objeto reativo aqui é porque em muitos aplicativos como esse, podemos ter vários modelos diferentes. Por exemplo, agora, quando editamos uma nota, saltamos para uma nova página, mas podemos decidir substituir essa funcionalidade por um modal para editar as notas. Esse objeto reativo nos dá um lugar onde podemos gerenciar todos os nossos modelos juntos. Você pode ter outra propriedade aqui, editar notas e, em seguida, usá-la para gerenciar o modal de notas de edição. Mas, por enquanto, vamos adicionar este modal de exclusão de notas, então eu vou me livrar disso. Salve isso. Vamos importar nosso novo componente modal e exibi-lo somente quando essa propriedade delete notes for verdadeira. Então, vamos pular para nossas entradas. Vamos importar a nota de exclusão modal notas de barra de componentes slush, exclusão modal de barra, visualização de pontos de notas. Vou salvar isso. E agora vamos colocar isso depois nosso modal de elemento de rodapé. Excluir nota. Salve isso. E agora podemos ver isso em ambas as nossas anotações. Mas vamos exibir isso somente quando os modais Dot Delete Note forem verdadeiros. Então, muitos v-if direcionados para este v dash modal, se modais, pontos, exclua, note, salve isso. E vemos o modal desaparecer. Se alterarmos o nó de exclusão de pontos dos modais para true, veremos que ele reapareça. Vamos definir isso de volta para false e salvar isso. Agora vamos usar balas para criar um modal bonito. Então, vamos voltar para o local do moinho de bolas no docs.io para componentes e modais. Vamos rolar um pouco para baixo aqui. Vamos usar este exemplo de cartão modal, que parece muito bom. Vou copiar todo o código para isso. Ir para modal, Excluir, Nota ponto Vue. Basta colar tudo isso aqui. Livre-se da div que adicionamos antes. Em densa tudo um pouco e salve essa recarga para que possamos realmente ver esse modal quando clicamos em Excluir. Vamos pular para o nosso botão Excluir na visualização de pontos Nope , que está aqui. Em vez de acionar nossas notas de exclusão, ação em nossa loja, vez disso, mostrará esse modal. Para fazer isso, podemos apenas fazer modais, Dot, Delete, notas são iguais a verdadeiras. Salve isso. Clique em Excluir. Ainda não estamos vendo o modal. Vamos ver se está sendo adicionado à nossa maquete aqui. Então vou inspecionar esta nota. Podemos dizer que o modal foi adicionado à página, mas não estamos vendo. Acho que isso é porque precisamos adicionar uma classe de ativo ao modal. Agora podemos vê-lo. Então, vamos voltar ao nosso componente modal e adicionar essa classe à raiz ativa. Salve isso. Agora vamos clicar no botão Excluir. Agora podemos ver o modal. Agora vamos modificar isso um pouco. Vamos alterar esse título aqui, título modal para excluir notas, interrogação, salvá-lo. E vamos adicionar algum conteúdo ao cabelo corporal. Então, dentro desta classe de corpo de cartão modal, vamos apenas adicionar, você. Claro. Você deseja excluir esta nota, salve-a. E agora podemos ver essa mensagem. Agora eu quero alinhar esses botões à direita. Se dirigirmos para este elemento de rodapé com uma classe de flashcard modal traço quatro. Podemos fazer isso adicionando uma das classes Flexbox do Ballmer, que é apenas para phi dash, dash, dash e diga, na verdade, acho que é justificar conteúdo flex e vamos tentar isso. Salve isso. Novamente, você pode encontrar todas essas classes documentadas no site anterior. Ok, agora vou trocar esses botões por aí. Coloque o botão cancelar primeiro dentro deste rodapé. Não quero alterar o texto neste botão Salvar alterações para excluir. Acho que faz sentido deixar este botão vermelho para que possamos mudar. Isso é sucesso. A classe dois é perigo. Para fazê-la ler. Este modal está parecendo muito bom agora. Agora só precisamos fazê-lo se comportar corretamente. Para que o número um, podemos ocultá-lo quando clicamos neste X ou no botão Cancelar. Se clicarmos fora do modal. Para fazer isso, vamos usar nosso clique fora do composable from view use novamente. Também precisamos fazer isso para realmente excluir a nota quando clicamos no botão Excluir. Também vamos adicionar algum controle de teclado a isso para que o usuário possa pressionar Escape para fechar o modal. Para fazer isso, vamos fazer uso de alguns ganchos de ciclo de vida. 101. Esconder o Modal (modelValue e (modelValue: Se o usuário clicar neste botão de conselho ou isso explodir neles, queremos ocultar esse modal. Agora, esses botões estão em nosso componente filho. Visualização de ponto Modal Excluir Nota. Mas se o usuário clicar nesses botões, queremos modificar os modais Dot, Delete Note propriedade que está no componente pai. Uma maneira de fazer isso é emitindo um evento do cliente quando clicamos nesses botões. E, em seguida, no componente pai, anote a visualização de pontos, escutando esse evento. E quando ele é recebido. Defina modais Dot, Delete, Note, box ou false. No entanto, como aprendemos anteriormente no curso, na verdade não precisamos fazer isso. Não é possível obter um componente filho modificar diretamente uma propriedade de dados que está em seu componente pai. Ao passar essa propriedade de dados reativos para o componente filho usando o modelo V, recebendo o valor do modelo V usando a prop de valor do modelo especial e, em seguida, atualizando a origem do esse valor modal no componente pai usando o valor do modelo de atualização. Bem, em primeiro lugar, vamos passar os modais Dot Delete Note para o componente filho usando o modelo V. Vamos pular para excluir modal nenhum componente aqui. Eu tenho permissão av, diretiva de modelo e set.seed da mesma forma que os modais Dot Delete notas, colar isso lá, salve isso. E agora podemos receber este modelo V usando a prop de valor modal especial, os componentes filho. Então, vamos pular para a visualização de pontos não excluídos modais. A seção de script no atributo configura nossos props. Então, muitos comentários aqui que dizem adereços. Sou um let uma constante chamada props e defini que igual ao método define props passar em um objeto e definiremos nossos props aqui. Para receber essa propriedade de dados que estamos transmitindo com o modelo V, precisamos usar a prop de valor do modelo, definir que é igual a um objeto. O tipo vai ser bilhão porque os modais, Dr. Lee No, são um bilhão unicamente serão verdadeiros ou falsos e quase definem o padrão como falso. Para garantir que isso esteja sendo passado corretamente e recebido corretamente. Vamos apenas produzir essa prop de valor modal em nosso modelo. Então, depois dos textos que adicionamos ao corpo, vou adicionar uma pré tag e apenas produzir chaves duplas e valor modal. Salve isso, recarregue o aplicativo, clique em Excluir. E sim, podemos ver que isso está passando porque podemos ver verdade aqui. Agora vamos remover essa pré-etiqueta. Salve isso. Agora vamos criar um método que pode ser disparado quando clicamos no botão X ou no botão Cancelar. Então, vamos pular para a seção de script no modal Delete Note dot Vue. Indo adicionar uma seção chamada close modal. Vou criar uma constante chamada colonizador modal fechado igual a uma função de seta. Por enquanto, vamos apenas sair do modal fechado. Salve isso. Agora vamos acionar esse método em nossos botões. Então, o botão cancelar, apenas vai dividir isso em várias linhas. Divida os atributos. Manipulador de clique melódico, clique é igual a fechar modal. Então eu vou copiar este manipulador de cliques, encontrar esse pequeno exporta. Onde está essa coisa? Aqui está, vou dividir isso em várias linhas. Divida os atributos, basta colar nesse clique, Salvar isso. A menos que se certifique de que este método modal próximo esteja disparando. Clique no botão Cancelar, vemos o registro. Clique no botão X, vemos o registro. Agora só precisamos emitir o evento de valor do modelo de esperança do DAG neste método. Primeiro de tudo, precisamos definir nossos mitos. Deixe sod nossa seção de luvas, crie uma constante chamada emit. Defina isso igual ao método emits definido passar em uma matriz. Vamos apenas adicionar o volume do modelo de dois pontos de atualizações. Diga que agora podemos emitir este evento especial em nosso método modal de roupas. Podemos simplesmente emitir e depois esperar o valor modal do dia. Portanto, isso mudará a propriedade de dados de origem no componente paralelo que estamos transmitindo com modelo V e recebendo com valor modal. Ele atualizará esta propriedade Delete Note no par de pontos de visualização de pontos da nota do componente, precisamos dizer a ela quais valores defini-la. E queremos esconder o modal, então queremos redefinir isso como falso. Vamos pular para esse emit. Podemos começar false como um segundo parâmetro. Digamos que pensem. Veja se está funcionando. Mostre o modal de exclusão, clique no X e isso está funcionando. Clique no conselho. E isso também está funcionando. 102. Excluir Modal - Clique para fora para fechar o: Seria melhor se esse modal se fechasse se clicássemos em qualquer lugar fora do carro. Essa é a funcionalidade que esperaríamos de um modal como esse. Lembre-se de que usamos esse clique fora do composable anteriormente do uso da visualização para fazer este Menu de navegação móvel desapareça quando clicamos fora dele. Poderíamos usar isso novamente. Bem, antes de fazermos isso, não gosto do fato de que não há preenchimento em torno desse modal. Quando estamos em um ticket de tela menor, melhor com um pouco traçando essa div com a classe de modal e apenas adicionando uma classe de H2 para dar a isso um pouco de preenchimento. Isso parece um pouco melhor. Eu acho. Vamos usar esse clique fora do composable aqui para que possamos fechar esse modal. Deixe-me clicar fora do cartão. Vou pular para o Explorer. Vou clicar com o botão direito do mouse na pasta de origem e escolher Localizar na pasta e procurar clique fora. Há um sem oposição. Então, vamos pular para isso. Vou copiar essa entrada. Em seguida, vá para a visualização de ponto do nó de exclusão modal. Sobre isso também, acabou. Importar, colar esse salto. Mas para não a visualização do Bardot. Agora vamos copiar todo esse código. Podemos também copiar o comentário também. Volte para excluir modal. Vou colar isso na parte inferior. Lembre-se de que precisamos de uma referência de modelo para dizer a esse composable em qual elemento vamos clicar fora de dois e depois fazer alguma coisa. Vamos substituir este menu navbar ref aqui e aqui que vamos clicar fora desta div modal de cartão tracejado. Poderíamos chamar isso de cartões modais ref. Vamos adicionar isso ao cartão modal. Os atributos. Este href, cod ref modal, salve isso. Eu não acho que vamos precisar dessa opção de ignorar. Eu só vou remover esse terceiro parâmetro, esses objetos nessa vírgula também assim. E podemos nos livrar desse ref de dados, que estávamos adicionando a essa opção de ignorar. Agora, quando clicamos fora, queremos apenas ocultar o modal acionando esse método close modal. Na verdade, podemos selecionar todo esse manipulador aqui da cinta de fechamento para esses parênteses. Acabei de colocar o nome do nosso método modal próximo. Vamos salvar isso, ver se isso está funcionando. Recarregar, mostrar o modal. Temos um erro aqui. Href não está definido. Acho que precisamos importar o método ref da vista. Importa da exibição, salve isso. Recarregar. Mostre o clique modal do lado de fora. Sim, está funcionando. Vamos apenas garantir que ele não esteja sendo acionado erroneamente, como se estivesse na barra de navegação antes. Eles só são disparados se clicarmos do lado de fora do cartão. E o conselho e os especialistas ainda estão trabalhando. 103. Excluir Modal - Controle de teclado (ganchos de vida): Normalmente, esperamos ser capazes de fechar um modal como este pressionando a tecla Escape no nosso teclado. Vamos configurar algum teclado não tinha link no gancho montado deste componente modal Delete Note dot Vue. Vou pular para o modal Delete Note falar com você, e para baixo para baixo. Vou criar um comentário chamado controle de teclado. É permitido um passe de gancho desmontado e um manipulador para isso assim. E vamos fazer logout montado por enquanto, digamos que temos um erro aqui no montado não está definido. Isso porque precisamos importar esse gancho de ciclo de vida da exibição, slats fora que batem em derretido, salvar essa recarga, mostrar o modal e podemos dizer que desmontado está sendo desconectado. Se o escondermos e mostrarmos novamente, podemos dizer que o desmontado está desconectado novamente. Agora, dentro de uma ferramenta múltipla, vamos configurar um ouvinte de eventos para o evento chave, que será acionado depois que pressionarmos uma tecla e depois soltar-la. Vamos nos livrar desse registro. E podemos simplesmente fazer pontos de documentos, adicionar evento, ouvinte, parênteses e seguir o primeiro parâmetro. Este é o pilar que vai ouvir, e vamos ouvir o evento. E o segundo parâmetro é nosso manipulador. Então, vamos adicionar uma função de seta aqui. Vamos também passar o objeto de evento. Eu substituirei esses parênteses por um a, e então vamos trancar isso por enquanto. Arquivo Console.log. Salve isso e recarregue, mostre modal e pressione a tecla de escape. E podemos ver o evento do teclado sendo bloqueado. Dentro desses objetos de evento. Podemos ver que quando pressionamos a tecla Escape, essa propriedade key está definida para escapar. Essa propriedade de chave geralmente é a propriedade que queremos verificar em nosso JavaScript para determinar qual tecla foi pressionada. Vamos verificar se a tecla de escape foi pressionada. E se assim for, então podemos simplesmente disparar o método modal próximo, escondendo assim o modal. Então, vamos remover este console.log. E podemos apenas fazer se um ponto k for igual a escapar deles, você poderia simplesmente disparar o modal próximo. Um método. Salve isso. Recarregue, mostre o modal, aperte a tecla de escape. E isso está funcionando. Vemos o modal desaparecer. No entanto, temos um problema aqui. Se olharmos algo dentro desse ouvinte de eventos, podemos simplesmente sair, fechá-lo. Salve isso. Agora, se eu recarregar, clique em Excluir para mostrar o modal e pressione Escape. Vemos de perto ele ser bloqueado uma vez. Mas se eu mostrar outro hit modal Escape, agora foi bloqueado duas vezes desta vez. E se mostrarmos um modal novamente, acerte a fuga. Desta vez, ele foi bloqueado três vezes. Isso ocorre porque mesmo depois que o modal é fechado, esse ouvinte de evento ainda existe. Este ouvinte de eventos não está sendo removido quando fechamos o modal. Quando mostramos um modal pela primeira vez, esse ouvinte de eventos é configurado. Deixe-me fechar o modal. Isso ainda está configurado. Então abrimos outro modal. Em seguida, configuramos um segundo ouvinte de eventos. Nesta parte, agora temos dois desses ouvintes de eventos disparando. Encontrei. Continuaremos adicionando um novo ouvinte de eventos cada tau que mostrarmos um novo modal. Então, o que precisamos fazer é remover esse ouvinte de eventos quando o modal for fechado. E poderíamos fazer isso no gancho desmontado, que será phi tinha ido em modal é removido do dom. Agora primeiro, para tornar um ouvinte de eventos removível, precisamos colocar sua função de retorno em sua própria função nomeada. Ambos conversas múltiplas. Vou criar uma constante chamada alça. Teclado. Defina isso igual a uma função de seta. Passe o parâmetro, o objeto de evento. Agora vou cortar essas duas linhas e colá-las nessa nova função. Agora podemos selecionar todo esse manipulador do suporte curly de fechamento para o a. Basta passar o nome desta função, alça, teclado. Vamos salvar isso. Vou me certificar de que ainda está funcionando. Aperte a tecla Escape. Isso ainda está funcionando. Agora só precisamos remover esse ouvinte de eventos na palestra desmontada. Após a conversa desmontada com Loudon no gancho desmontado, passe um manipulador de função de seta. Agora, para remover esse ouvinte de eventos, podemos usar o método remove event listener. Vou copiar toda essa linha, colar a linha aqui e alterar o ouvinte de eventos para remover o ouvinte de eventos. Salve isso. E precisamos adicionar a esperança montada desconhecida às nossas importações. Vamos adicionar isso aqui no montado. Salve isso. Agora vamos ver se isso está funcionando. Clique no botão Excluir, mostre o clique modal Escape. Vemos nosso registro sendo disparado apenas uma vez. Clique em Excluir novamente, mostre o hit modal Escape. Agora vemos fechá-lo sendo desconectado apenas mais uma vez. Então isso não está funcionando. O ouvinte de eventos está sendo removido quando o modal é fechado. E se continuarmos batendo em Escape aqui, não vemos nada bloqueado. Agora podemos simplesmente remover o registro do console função do teclado do identificador. Salve isso. Agora tudo o que precisamos fazer é excluir este futebol. Quando o usuário clica em ON delete no modal. 104. Excluir Modal - Elimine a nota: A última coisa que precisamos fazer é realmente excluir as notas que o usuário está tentando excluir quando clicar neste botão vermelho de exclusão. Agora já temos uma ação Excluir nota em nossa loja. Prateleiras, lojas e armazene Node.js para as opções. Já temos essas ações Excluir Nota configuradas que podemos usar para excluir as notas. Em todo esse oxigênio está esperando o ID do nó que queremos excluir. Assim, podemos simplesmente acionar esse oxigênio diretamente em nosso componente modal Delete Note dot Vue. Vamos pular para isso. No botão excluir, que está aqui. Só queremos acionar essa ação em nossa loja. Exclua a nota que está esperando um ID, mas na verdade não temos acesso ao ID de notas nesse componente. No entanto, se saltarmos para a visualização de ponto da nota do componente pai, teremos acesso a todas as informações de notas aqui neste prop de nota. Poderíamos usar isso para passar o ID da nota para a visualização de ponto do nó de exclusão modal do componente filho usando uma prop. Vamos pular para um componente modal delete nope, que está aqui. Poderíamos passar todos os objetos da nota. Podemos chamar esse conjunto de notas igual a notas. Isso passaria os objetos inteiros com o ID e o conteúdo. No entanto, na verdade, só precisamos do ID. Então, podemos muito bem passar o ID para baixo. Para fazer isso, poderíamos passar notas e talvez apenas mudar o nome do prop para a nota ID, CamelCase. Salve isso. Agora precisamos receber o ID prop desta nota, o componente modal Delete Note dot Vue. Então, vamos pular para isso. Pule para nossos adereços. Tenho permissão para que esse tipo de prop seja string. Eu vou fazer isso necessário também. Vou definir necessário como verdadeiro. Vamos salvar isso e garantir que essas propriedades de ID de nó sejam passadas. Depois do nosso conteúdo aqui. O modal, vamos apenas produzir pré-conversa com chaves duplas e ID de nota, salvar isso, recarregar e mostrar o modal. E sim, podemos ver ID1 sendo cuspido para a primeira nota, um ID para ser cuspido para a segunda nota. Vamos nos livrar dessa pré-etiqueta. Agora só precisamos importar nossa loja, armazenar opiniões para este componente modal, ajustar, acionar este leilão de notas de exclusão e passar o ID. Primeiro, precisamos importá-lo. Podemos apenas importar. Use as notas da loja de barras de lojas de barras. Na verdade, não, vamos adicionar notas de armazenamento de barras. Salve isso. Precisamos atribuir essa loja a uma constante. Então, depois de nossos adereços e limites dentro de um comando de loja, e apenas fazer anotações const store é igual a usar notas de loja, parênteses. Salve isso. E agora devemos ter acesso a uma loja aqui. Esta ação Excluir nota dentro da loja. Vamos pular para o botão Excluir, que está aqui. Vou dividir isso em várias linhas, dividir os atributos em várias linhas, adicionar um manipulador de cliques. Só queremos disparar o leilão Excluir Nota que está em nossa loja. Assim, podemos apenas fazer notas roubadas, Deleção de pontos, nota, passar o ID. E, novamente, estamos passando o ID, prop de ID desta nota. Podemos apenas fazer notas roubadas Dot Delete notas, notas, ID. Vamos salvar isso e ver se está funcionando. Recarregar, clique em Excluir. Clique em Excluir novamente. Podemos ver que a nota foi excluída. Também podemos ver que o modal está sendo oculto automaticamente também. Deixe-me clicar em Excluir. E isso ocorre porque o modal é um componente filho da visualização de pontos de nota. Observação ponto view é o componente que estamos usando para exibir uma nota. Quando excluímos uma nota, esse componente Vue de ponto de nota é removido do despejo junto com todos os seus componentes filhos, incluindo o componente Excluir modal, Note dot Vue. 105. Roundup de curso: Parabéns, você chegou até o fim. Espero que agora você se sinta pronto para começar a construir seus próprios altos com o V3 e a incrível API de composição. Também espero que este curso tenha ajudado você a entender os enormes benefícios que acompanham a API de composição sobre a API de opções. Certifique-se de manter o conhecimento deste curso criando aplicativos com a API de composição. Assim que você contar, você pode tentar reconstruir as bolas Nope do zero por conta própria. Ou você pode tentar construir um clone de um dos seus ups favoritos. Se você quiser aprender mais comigo e pular para o link de pontos do Danny YouTube, onde você pode encontrar minhas maquiagens de canal do YouTube com Danny, onde compartilho toneladas de conteúdo gratuito em Vue.js, quasar framework, embelezamento e código VS em muito mais. Também confira meus outros cursos freemium são feitos cursos de barra de link iz ponto. Todos os links para meus cursos premium nesta página aplicarão automaticamente meu desconto especial. Então, cada curso, eu tenho um curso sobre o beautify, que é a estrutura de componentes mais popular para Vue.js. Infelizmente, no momento em que estou gravando isso embelezado não suporta alguns três, mas espero que em breve. Então eu tenho três cursos sobre quasar framework, que é uma estrutura absolutamente incrível que permite criar um Vue.js com uma única base de código, implantá-lo em muitas plataformas diferentes. Você pode implantá-lo em um aplicativo real que pode ser implantado nas lojas de aplicativos para iOS, Android, Mac e Windows. Você pode implantá-lo em um aplicativo de página única e no lado do servidor de aplicativos web progressivo renderizado até mesmo em uma extensão de navegador para Chrome ou Firefox. A versão mais recente do quasar, as que suportam V3 e a API de composição. No entanto, no momento em que estou gravando isso, esses cursos são para o U2 e a API de opções. No entanto, com todas as habilidades que você aprendeu neste curso, você deve ser capaz de acompanhar esses cursos usando a v3. Sou a API de composição. Finalmente, tenho um curso curto onde ensino o básico de HTML, CSS e JavaScript. Vou anexar links ao meu canal do YouTube na página Cursos a esta palestra. Obrigado por assistir, e espero que você goste construir coisas com a API de composição.