Academia do Vue.js 2: aprenda o Vue passo a passo | Chris Dixon | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

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

teacher avatar Chris Dixon, Web Developer & Online Teacher

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

102 aulas (8 h 30 min)
    • 1. Olá!

      2:29
    • 2. O que é o Vue.js e por que devo usá-lo?

      2:16
    • 3. Instalação do Visual Studio

      1:51
    • 4. Introdução da seção: noções básicas de Vue

      0:30
    • 5. Baixe o inicializador de projetos

      2:32
    • 6. Instalando o Vue.js

      3:05
    • 7. A instância do Vue e o objeto de dados

      7:28
    • 8. Modelos e o DOM virtual

      3:31
    • 9. Associação de dados de via dupla com v-model

      3:08
    • 10. Manipulação de eventos e métodos

      5:46
    • 11. Processamento de lista

      2:54
    • 12. Processamento condicional no Vue

      5:19
    • 13. Associando elementos a atributos

      4:11
    • 14. Associando estilos

      4:48
    • 15. Sintaxe abreviada do Vue

      2:42
    • 16. Gerando texto e HTML de saída

      6:25
    • 17. V-if vs v-show

      3:10
    • 18. Usando expressões do Javascript

      4:22
    • 19. Desfecho da seção: noções básicas de Vue

      0:32
    • 20. Introdução da seção: um olhar mais aprofundado no Vue

      0:39
    • 21. Adicionando uma barra de progresso

      7:46
    • 22. Propriedades calculadas

      8:57
    • 23. Observadores

      3:50
    • 24. Eventos chave e modificadores

      3:21
    • 25. Filtros

      6:08
    • 26. Mais sobre loops: chaves e números de índice

      5:27
    • 27. Usando várias instâncias do Vue

      6:25
    • 28. Usando loops em objetos

      6:56
    • 29. Adicionando nossos links e chaves de navegação

      6:16
    • 30. Acessando as instâncias do Vue externamente

      4:32
    • 31. Propriedades e métodos da instância do Vue

      4:50
    • 32. Referenciando elementos com ref

      4:45
    • 33. Usando modelos de string

      7:06
    • 34. O ciclo de vida do Vue

      5:40
    • 35. Ganchos do ciclo de vida do Vue em ação

      6:51
    • 36. Desfecho da seção: um olhar mais aprofundado no Vue

      0:39
    • 37. Introdução da seção: ferramentas de criação e fluxo de trabalho

      0:37
    • 38. Instalando o Node e NPM

      4:08
    • 39. Aplicando scaffolding em projetos com o vue-cli

      8:06
    • 40. Explorando o layout do nosso projeto e ferramentas de criação

      9:26
    • 41. Usando o objeto de dados com modelos de arquivo único

      7:49
    • 42. Desfecho da seção: ferramentas de criação e fluxo de trabalho

      0:19
    • 43. Introdução da seção: introdução aos componentes

      0:41
    • 44. O que são componentes?

      5:07
    • 45. Registrando componentes globais

      10:57
    • 46. Registrando componentes locais

      5:26
    • 47. Criando componentes de arquivo único

      8:37
    • 48. Adicionando o componente frontal de cartão

      9:07
    • 49. Emitir dados aos componentes pai

      9:21
    • 50. Componentes dinâmicos

      2:49
    • 51. Criando os componentes adicionais de cartão

      5:53
    • 52. Criando o componente de entrada de texto

      9:40
    • 53. Recebendo dados da entrada de texto

      4:38
    • 54. Criando o componente de saída de texto

      3:38
    • 55. Passando dados com props

      5:37
    • 56. Mantendo os componentes vivos

      2:26
    • 57. Escopo dos estilos de CSS

      7:40
    • 58. Validação de props

      5:01
    • 59. Passando dados de props para um objeto de estilo

      3:19
    • 60. Introdução aos slots

      9:38
    • 61. Escopo do slot e conteúdo de fallback

      4:57
    • 62. Slots com nome

      3:30
    • 63. Desfecho da seção: introdução aos componentes

      0:42
    • 64. Introdução da seção: continuação de componentes e armazenamento do Firebase

      0:37
    • 65. Configurando o Firebase

      6:55
    • 66. Criando o componente do ImageUpload

      6:40
    • 67. Fazendo upload de imagens ao Firebase

      9:44
    • 68. Miniatura de exibição da imagem

      4:11
    • 69. Barra de progresso de upload e dados de arquivo $emit

      8:54
    • 70. Componente de saída da imagem

      9:09
    • 71. Baixando imagens do Firebase

      6:15
    • 72. Definir o botão da imagem

      7:20
    • 73. Menu de opções de texto: tamanhos de fonte

      8:00
    • 74. Menu de opções de texto: alinhamento de texto

      5:03
    • 75. Menu de opções de texto: estilo e peso da fonte

      9:56
    • 76. Remover o botão de imagem

      4:21
    • 77. Passando dados com retorno de chamada

      6:40
    • 78. Tornando as imagens arrastáveis

      5:48
    • 79. Finalizando o componente CardInsideLeft

      4:50
    • 80. Finalizando o componente CardInsideRight

      2:48
    • 81. Finalizando o componente CardBack

      3:39
    • 82. Introdução ao barramento de eventos

      7:26
    • 83. Enviando eventos ao barramento de eventos

      6:51
    • 84. Recebendo eventos do barramento de eventos

      13:05
    • 85. Adicionando mesclagens

      6:51
    • 86. Desfecho da seção: continuação de componentes e armazenamento do Firebase

      0:35
    • 87. Introdução da seção: transições e animações

      0:31
    • 88. Classes de transição

      2:58
    • 89. Adicionando transições de CSS

      6:47
    • 90. Adicionando animações de CSS

      5:58
    • 91. Transições de componentes e modos de transição

      3:23
    • 92. Introdução aos ganchos de Javascript

      2:03
    • 93. Ganchos de Javascript em ação

      8:51
    • 94. Combinando animações e transições

      4:59
    • 95. Classes de transição personalizadas

      3:14
    • 96. Transições de renderização iniciais

      3:07
    • 97. Transições de elementos e chaves

      4:45
    • 98. Transições de grupo

      5:43
    • 99. Classe v-move e nomes de transição dinâmicos

      4:06
    • 100. Desfecho da seção: transições e animações

      0:32
    • 101. Obrigado

      1:06
    • 102. Siga-me na Skillshare!

      0:23
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

2.024

Estudantes

1

Projeto

Sobre este curso

*** ATUALIZAÇÃO!

Vue 3 foi o que o seu e este curso foi substituido com uma nova que vai de uma nova versão:

https://www.skillshare.com/class/In-Dept-Vue-3-para iniciantes para iniciantes/1881669970

***

Transito de HTML, CS, CS, JavAScript para o próximo nível aprendendo uma das estruturas de Java mais de JavAScript disponíveis de hoje de o Vue!

Se não estiver familiarizado com o vue.js ou as bibliotecas de estruturas de JavAS, em geral, algumas das perguntas que você pode fazer de a de que de que seja a de que o de

O que é Vue?

E por que aprender por isso em primeiro lugar?

Vue.js é muito divertido e fácil de usar de JavAScript para criar relações de usuários

O núcleo do quadro é muito leve e rápida e pode ser usado em projetos de qualquer tamanho

Desde o seu site ou aplicativo de um site de e a aplicação de que só o controle de uma parte de o que é de uma parte, como adicionar novos componentes.

Com aplicações de médias ou grandes páginas de páginas

Considerando o tamanho de peso do de o de o vue, a sua a que está com recursos que você vai aprender durante este curso.

Durante este curso, você criará dois projetos divertidos e desafiadores, para aplicar tudo o que você vai aprender de forma de aprender de forma learn

Começamos com um aplicativo de lista de visitas onde os usuários podem adicionar seu nome a uma lista de de de eventos de de agendamento. Este é um aplicativo simples, mas vai orientar você em todos os fundamentos de vue.js como a

  • de dois de dados de duas maneiras
  • Manipulação de eventos
  • Modelos e dom, o DOM virtual
  • Lista e renderização condicional
  • Apagos e estilos vinculados
  • A instância Vue
  • expressões de Java
  • Propriedades de instação: dados, informadores, Computed, filtros etc.
  • Looping e filtros
  • Refs e outras propriedades de instâncias
  • Vue de de vida
  • E muito mais!

Em seguida, você criará um conhecimento criando uma aplicação de cartão de cumprimos, onde o usuário pode criar e editar seu próprio cartão de cumprimento. Eles podem adicionar seu próprio texto e imagens para criar um cartão personalizado.

Este projeto apresenta mais conceitos como:

  • Componentes (arquivo de o mundo e um arquivo de um único de mundo)
  • O Vue CLI para projetos de scaffolding com ferramentas de criação de as ferramentas de webpack e Babel
  • Instalando o Node e NPM
  • Passando dados com o $emit
  • Armazenando e recuperando imagens do Firebase
  • Instrumentos e a validação de objetos
  • Slots e espaço de slots
  • Obrigação para as opções de menu para mudar fontes e estilos
  • Autocarro de eventos
  • Mixins
  • E muito mais!

Então, está pronto para aprender um dos quadros mais novos e mais novos de JavAS, que está disponível?

Junte-se a mim e estou ansiosa para ter você em bordo!

Conheça seu professor

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a Web Developer from the UK. I am an experienced trainer leading web development bootcamps and also teaching online courses.

My main areas of interest are Vue.js, WordPress, Shopify, Javascript, eCommerce, and business. I am passionate about what I do and about teaching others. 

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and I have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like wh... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Olá!: Bem-vindo ao curso Vue.js Academy. Estou animada por ter você comigo. Meu nome é Chris, e eu sou um desenvolvedor web e também um experiente criador de cursos on-line, ensinando milhares de alunos satisfeitos. Vue.js é um dos frameworks JavaScript mais ativos e próximos disponíveis hoje. Ele também é um dos mais divertidos de aprender e está repleto de recursos incríveis que permitem que você crie ambos os pequenos sites até aplicativos complexos de uma única página. Então, por que escolher este curso em vez de outros cursos Vue.js disponíveis? Bem, este curso tem uma abordagem baseada em projetos. Veremos exatamente como cada conceito que você aprenderá se encaixa imediatamente em projetos reais. O curso é amigável para iniciantes também. Começamos construindo um aplicativo de lista de convidados onde começaremos com o básico. Eu forneci um modelo inicial [inaudível] para o primeiro projeto para que possamos mergulhar diretamente em aprender o que Vue.js tem para oferecer. Durante este projeto, você se torna confiante com o funcionamento do Vue, e também com os conceitos centrais, como dados de vinculação, métodos, propriedades do computador e muito mais. Você também aprenderá sobre os estágios do ciclo de vida do Vue que podemos explorar. O Projeto 2 baseia-se no que já aprendemos até agora. Apresentamos a você para criar ferramentas e também melhorar nosso fluxo de trabalho usando as tecnologias mais recentes, como o Vue CLI, Webpack e Bubble também. Este projeto será um aplicativo de cartão onde o usuário pode editar e criar seu próprio cartão personalizado. Além de ser um projeto divertido para construir, você vai aprender tantas técnicas, como usar componentes e como passar dados entre eles, juntamente com a integração de seu aplicativo com Firebase para armazenamento de imagens. Além disso, abordaremos a adição de animações e transições aos seus aplicativos para garantir que eles realmente se destacam. Tudo o que você aprender será imediatamente colocado em prática nos projetos para realmente dar-lhe uma melhor compreensão de como todos eles se encaixam em aplicações reais. O que você está esperando? Pressione o botão Cadastre-se agora e aprenda uma das estruturas JavaScript mais quentes disponíveis hoje. 2. O que é o Vue.js e por que devo usá-lo?: Se você não está familiarizado com vue.js ou JavaScript bibliotecas e frameworks em geral, algumas das perguntas que você pode estar fazendo é, o que é vue.js e por que eu deveria aprender em primeiro lugar? Bem, vue.js é um framework JavaScript muito divertido e fácil de usar para construir interfaces de usuário. O núcleo do framework é muito leve e rápido, e ele pode ser usado em projetos de qualquer ciência, desde facilmente soltá-lo em um site ou aplicativo existente até apenas usá-lo para controlar uma pequena parte, como adicionar um novo componente, diretamente para aplicativos de página única de média ou grande. Considerando o tamanho leve do núcleo vue.js, ele ainda está embalado com muitos recursos que você aprenderá durante este curso. O núcleo também pode ser estendido para adicionar mais recursos, como roteamento de frontend e gerenciamento de estado. Se você já criou sites antes, você já deve estar familiarizado com HTML, CSS e JavaScript, que são os blocos de construção dos aplicativos vue.js. Isso significa que você pode fazer uso de suas habilidades existentes para [inaudível] crescer e aprender ainda mais rápido. O Vue.js lida apenas com a camada de visualização, que significa que você está livre para integrá-la com qualquer um dos back-ends das bibliotecas, tornando-o realmente fácil e flexível de adotar. Se você usou outros frameworks ou bibliotecas, como React, muitos dos conceitos centrais serão familiares, como usar um DOM virtual e criar componentes reutilizáveis. Reagir também é ótimo para usar também, mas, na minha opinião, vue.js é muito mais fácil de começar, e também está sendo visto superando Reagir em determinados testes de desempenho. Estas são apenas algumas das razões pelas quais vue.js viu um enorme aumento na popularidade e também olha para se tornar um jogador ainda maior no futuro. Agora, sabemos alguns dos benefícios de usar vue.js, agora vamos obter a configuração de código do Visual Studio, para que possamos saltar diretamente para a construção do nosso primeiro projeto. 3. Instalação do Visual Studio: Para este curso, precisaremos de algumas coisas para começar a funcionar. Primeiro, precisamos de um editor de texto. Você pode já ter uma preferência ou uma que você já usa. Para este curso, usarei o Visual Studio Code, que é ideal para codificação JavaScript, e também possui um terminal interno que precisaremos mais tarde no curso. Você pode usar qualquer editor de texto que você gosta, mas aqui estão algumas opções populares do editor de textos, como Atom, Brackets, WebStorm e, claro, Visual Studio Code. Se você já tem um desses e tem um navegador da web, sinta-se à vontade para passar para o próximo vídeo. Caso contrário, eu recomendaria que você vá para code.visualstudio.com e siga as instruções de download para sua plataforma. Depois de fazer isso, volte e adicionaremos alguns plug-ins para ajudá-los a trabalhar com Vue.js. Uma vez concluída a instalação, vou adicionar um plug-in para adicionar Vue.js a trechos de código e também algum realce de sintaxe. Se você abrir seu editor de texto e clicar no ícone de extensões na parte inferior das opções, verá que já tenho o Vue 2 Snippets instalado. Para instalar isso, você pode clicar na barra de pesquisa e procurar o Vue 2. O que eu vou usar é Vue 2 Snippets, que é por [inaudível], em seguida, clique no botão de instalação e você está pronto para ir. Finalmente, você também precisará de um navegador da web. Eu recomendaria o Chrome do Google, mas você pode usar qualquer navegador da web que você gosta. Isto é para a configuração inicial. Agora vamos saltar para a construção do nosso primeiro aplicativo Vue.js. 4. Introdução da seção: noções básicas de Vue: Como em todos os meus cursos, eu gosto de não perder tempo em sujar nossas mãos e realmente construir projetos reais. Este curso não é diferente e vamos começar construindo um aplicativo de lista de convidados, onde o usuário pode registrar seus interesses em um evento e ter o nome adicionado à lista de convidados. O projeto será relativamente simples, mas cobriremos todos os conceitos básicos. Você precisará começar a construir vue.js-ups. Vamos em frente e começar. 5. Baixe o inicializador de projetos: Anexado este vídeo está um projeto inicial que vamos usar para saltar direto para o vue js. Eu quero baixar o meu e colocá-lo na área de trabalho para fácil acesso. Mas você pode colocar o seu em qualquer lugar. Desde que seja conveniente para você. Agora você já deve ter seu editor de texto configurado. Vou abrir o Visual Studio Code e depois que ele for aberto, vou arrastar o iniciador do projeto para o editor de texto. Então vamos dar uma olhada no que está incluído. Se abrirmos o index.html , são apenas dados básicos de HMO. Na seção de cabeça temos apenas algumas metatags básicas, o título. Nós também temos alguns links para bootstrap. Nós só vamos usar isso para algum estilo básico e layout. O corpo do projeto começa com uma div principal, que tem um id de aplicativo. Este vai ser o contêiner principal e vamos dar uma olhada nisso com mais detalhes quando olharmos para a instância vista. Bem, então, você só tem algumas linhas básicas e contêineres e algumas informações sobre a lista de convidados. Se abrirmos a pasta do projeto e, em seguida, se clicar duas vezes em index.html. Você pode então ver a estrutura básica do que temos. Temos uma linha que tem algumas informações sobre os eventos, como a data do evento, o título do evento e uma descrição. Nós também temos uma entrada de texto onde o usuário pode adicionar seu nome e, em seguida, enviá-lo para adicioná-lo à lista de convidados. Então abaixo disso temos outra linha e, em seguida, um geral abaixo deste, que vai ser o lugar onde todos os nomes são adicionados. No momento, diz que ainda não há nomes adicionados. Mas adicionaremos a funcionalidade ao longo desta seção para fazer isso funcionar. Sobre o app.css nós apenas temos algum estilo básico apenas para torná-lo um pouco mais agradável. O app.js está vazio por enquanto. Mas este é o lugar onde vamos adicionar a funcionalidade JS vista à medida que passamos por esta seção. Esta é apenas uma visão geral básica do que está incluído no projeto como um pacote de inicialização. Isso se tornará muito mais familiar à medida que você passar por esta seção. Em seguida, veremos como instalar o vue js e como adicioná-lo aos projetos iniciais e, em seguida, começaremos a trabalhar dentro deste app.js, dando uma olhada na instância view. 6. Instalando o Vue.js: No último vídeo, deveríamos ter baixado o iniciador do projeto, que coloquei na minha área de trabalho para facilitar o acesso. Você também deve ter um editor de texto pronto para usar. No meu caso, estou usando o Visual Studio Code. Neste vídeo, vamos mostrar alguns exemplos de como podemos começar a instalar Vue.js. Vou até o meu navegador da Web e vou usar o Chrome para o resto deste curso. Então vamos para o Vue.js.org, que é o site oficial do Vue.js. Se você clicar no guia no canto superior direito e, em seguida, uma vez carregado, você verá um menu de navegação à esquerda. Para começar, precisamos ir para o menu de instalação, e ele fornecerá algumas opções de como começar. O primeiro é como incluir Vue.js dentro de tags de script, para que possamos clicar na versão de desenvolvimento ou na versão de produção. A versão de desenvolvimento tem o modo de depuração e também os avisos. A versão de produção não tem estes e é minificado. Tudo o que precisamos fazer é clicar em um desses botões e, em seguida, obter o download, então podemos salvar esses arquivos dentro de nosso aplicativo e vincular a eles usando tags de script. Esta técnica é a mesma que incluir qualquer um dos seus scripts, como j-query. Outra opção é usar o link CDN, vamos usar para este projeto. Este é um link onde a biblioteca Vue.js é hospedada externamente. Se clicarmos no link recomendado lá, não seria levado para uma versão hospedada do Vue.js, e esta é a versão mais recente. Voltaremos a isso em instantes. A próxima opção é usar o NPM ou o Node Package Manager. Vamos usar o NPM no próximo projeto, mas por enquanto eu só quero manter as coisas simples, vamos nos concentrar no Vue. js e, em seguida, no básico. Há também o Vue.cli, que é uma maneira fácil de andaimes projetos Vue.js. Novamente, vamos usar isso mais tarde, mas por enquanto eu vou apenas ir para o link CDN e, em seguida, clique no link, e então precisamos dele copiar este link URL. Então, se voltarmos ao seu editor de texto e abrirmos os projetos. Se formos para o index.html, quando ele for para a seção principal logo abaixo do título, e depois adicionar as tags de script, e então podemos adicionar os atributos de origem e, em seguida, colar no link para o Vue. js biblioteca e, em seguida, salve isso. Isso é o quão rápido e fácil é adicionar Vue.js como um link CDN. Com Vue.js agora adicionado ao nosso aplicativo, vamos agora passar para o próximo vídeo onde vamos dar uma olhada na adição do VUE.Instance. 7. A instância do Vue e o objeto de dados: Agora temos acesso à biblioteca Vue.js usando ECD e link. Agora podemos começar a trabalhar com dentro de nosso arquivo app.js. App.js está incluído no projeto inicia. Você já deve ter baixado. Este arquivo você pode nomear qualquer coisa que você gosta. Então você é livre para escolher, se preferir. Vamos começar acessando o objeto view, e isso nos permite criar uma nova ocorrência de view digitando New View, seguido pelo parêntese e um ponto-e-vírgula. Esta nova instância de visualização vai basicamente controlar a nossa aplicação e os dados HTML a serem renderizados para a tela. Em seguida, precisamos passar em um objetos de opções, que contém várias opções, que vamos explorar ao longo deste curso, tais como visualização HTML, qual elemento HTML que queríamos montar. Ele também contém todos os nossos métodos e dados. Primeiro, vamos dar uma olhada no El. Esta palavra-chave informa qual elemento HTML controlar. No nosso caso, queremos controlar a página index.html. Então eu vou usar o principal recipiente div circundante, que daria um AID de até. Então, podemos definir o valor da string de el para ser igual a até com o prefixo de hash porque é AID. Isso é exatamente como um seletor CSS. Então, se quisermos controlar uma div com uma classe em vez de uma ID, vamos apenas substituir o hash por um ponto. Agora selecionamos nossos elementos. Queremos trabalhar com a propriedade de dados. Isso contém um objeto que armazena todos os dados que queremos usar dentro desta instância de exibição. No momento, todos os dados dentro do nosso aplicativo são apenas HTML simples, o qual Vue.js Clooney não tem controle. Por exemplo, todos os dados sobre os eventos listados, como as datas do evento, o título do evento e a descrição do evento são codificados manualmente. Podemos alterar isso, adicionando-o ao objeto de dados dentro de nossa instância view. Então vou começar a transferir esta informação codificada manualmente para a nossa propriedade de data. Então vamos começar por incluir datas. Então selecione a data a partir daí, coloque-o para fora HTML. Então, se formos para a nossa propriedade de datas, podemos definir um nome para essas datas. Então eu quero chamar meu EventDate seguido pela coluna, e, em seguida, dentro de uma string, podemos adicionar a data dentro de lá. Podemos então fazer o mesmo com o título do evento. Então, de volta na página de índice, se você colocar o nome de Summer Festival, e, em seguida, dentro de nossos dados, volta em nosso app.js, e em seguida, vamos chamar isso de EventTitle. Então, como antes, com nossos dias como uma corda. Então colando isso entre as citações. Então, finalmente, nós também faremos o mesmo para a descrição do evento. Então vá até a página de índice, coloque a descrição do evento e, em seguida, logo abaixo do EventTitle, criaremos o nome de dados EventDescription e colaremos isso como um valor. Então agora precisamos de uma maneira de adicionar esses dados de volta ao nosso HTML. Para inserir esses dados em nosso código, fazemos isso com uma sintaxe de modelo especial de chaves duplas. Você também verá isso referido como sintaxe de bigode ou interpolação de texto. É assim que ligamos nossos dados com o DOM. Isso também significa que os dados são reativos e serão atualizados quando houver uma alteração com os dados. Dentro dessas chaves, podemos adicionar o nome da propriedade date que acabamos de criar. Então vamos começar com o EventDates no lugar de onde colocamos a data pouco antes. Então vamos salvar isso e atualizar o navegador, e agora podemos ver a data está aparecendo de volta na tela. Então esta data está funcionando agora porque está dentro das chaves duplas. Então Vue.js sabe procurar esse nome de propriedade dentro do objeto data que acabamos de criar. Ele também será atualizado sempre que o valor de EventDate for alterado. Então, o que eu gostaria que você fizesse agora é exatamente o mesmo para o EventTitle e também para o EventDescription. Então faça uma pausa e dê uma chance. Se é algo que você não se sente confortável, ainda, não se preocupe. Vou continuar agora adicionando o EventTitle. Então faça o mesmo como antes. No lugar do título, adicionaremos as chaves duplas e, em seguida, adicionaremos o EventTitle. Finalmente, em um lugar onde colocamos o EventDescription também irá adicionar o EventDescription lá. Guarde isso e faremos uma atualização final só para verificar se está tudo funcionando bem. Então, não está ótimo. Temos as datas, o título e também a descrição, se [inaudível] de volta na página. Mas desta vez temos Vue.js controlando os dados. Então, finalmente, eu só quero terminar com uma última coisa. Como essas propriedades de dados livres estão relacionadas, eu vou agrupá-los dentro de seu próprio objeto de eventos. Isso é totalmente opcional, mas faz sentido especialmente se estendermos criando mais de um evento. Então, de volta dentro da propriedade de dados, queremos criar o objeto de eventos. Em seguida, vou cortar EventDate, EventTitle e EventDescription e, em seguida, certifique-se que estes colados dentro do novo objeto de evento. Agora de volta no navegador, se fizermos uma atualização, veremos que os dados desaparecem. Isso é porque precisamos dizer ao Vue que essas propriedades e agora dentro de um objeto chamado eventos. Então isso significa apenas fazer mais uma mudança dentro da página de índice. Então, tudo o que precisamos fazer é nossos eventos na frente de EventDates, o mesmo com EventTitle, e, finalmente, o mesmo com EventDescription. Então aperte salvar. Agora, se voltarmos para o navegador e dar uma atualização, devemos ver que todos os nossos dados estão de volta na tela. Então agora criamos nossa instância do Vue e analisamos como usar o objeto de dados para controlar um texto dentro de nossa aplicação. Em seguida, vamos dar uma olhada em como o Vue JS lida com modelos e utiliza o DOM virtual. Te vejo lá. 8. Modelos e o DOM virtual: No último vídeo, analisamos como criar uma instância do Vue e também como adicionar dados reativos ao nosso aplicativo. Como o Vue js gerencia os dados para torná-los reativos e atualizar nossa página quando há uma mudança? Mas vamos dar uma olhada no que acontece em segundo plano. Se formos para as ferramentas de desenvolvedor do navegador dentro do Chrome, podemos acessá-las com um botão direito do mouse e, em seguida, selecionar “Inspecionar”. Se, em seguida, selecionar o Div com a classe de bloco de cartão, podemos dar uma olhada no conteúdo e podemos ver que o título do evento, as datas do evento, e a descrição do evento é adicionado entre P-tags ou cabeçalhos. Portanto, a saída HTML é diferente do que digitamos dentro do Editor. Nós não temos nenhuma sintaxe de chave dupla e não podemos ver os nomes de nossas propriedades de dados, como título do evento. Isso ocorre porque V