Vue JS - Construa 5 aplicativos da Web [2/5] | David Katz | Skillshare

Velocidade de reprodução


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

Vue JS - Construa 5 aplicativos da Web [2/5]

teacher avatar David Katz, Software Engineer - Coding Instructor

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

8 aulas (37 min)
    • 1. Prévia de base

      0:53
    • 2. Configurando base de estrelas

      2:40
    • 3. . Arquivos Vue

      6:17
    • 4. Estilo básico com Css

      2:59
    • 5. Apresentando a API

      6:37
    • 6. Criando um componente de personagem

      5:33
    • 7. Comportamento de caracteres de finalização

      7:18
    • 8. Estruturando os personagens

      4:29
  • --
  • 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.

260

Estudantes

--

Sobre este curso

Torne-se um engenheiro de software sob demanda, tomando este tutorial no Vue Js. Como um dos quadros que mais crescem para desenvolvimento de web, aprender Vue é essencial. Simplificando, entender Vue vai abrir portas e empregos para você.

 

Este curso baseado em projetos vai ter você codificação imediatamente. Ao criar cinco aplicativos de exemplo cuidadosamente pensados, você vai aprimorar suas habilidades no desenvolvimento de web moderno.

 

Primeiro, aprenda os fundamentos do Vue passando pelos principais conceitos e sintaxe. Em seguida, construa seu primeiro aplicativo de uma única página com Vue. Segundo, crie um aplicativo que manipule solicitações da Web HTTP no Vue e usa uma API pública. Amplie neste aplicativo em seguida, aprendendo VueRouter para aplicativos de várias páginas. Quarto, construa um aplicativo que funcione com o Vuex para gerenciar dados. Finalmente, capte tudo criando um aplicativo com autenticação completa e um banco de dados em tempo real.

 

Você não vai aprender apenas Vue, mas bibliotecas essenciais como VueRouter e Vuex. Vuex pode ter uma reputação de complexidade, mas você vai encontrar neste curso, uma receita secreta que resume o Vuex até três passos simples!

 

Por último, não se preocupe se você for novo no desenvolvimento da web. Alguma experiência em JavaScript vai ajudar, mas este curso explica cada novo conceito completamente.

 

Então, o que você está esperando? Dê um mergulho em VueJs. Vamos começar a codificar!

Conheça seu professor

Teacher Profile Image

David Katz

Software Engineer - Coding Instructor

Professor

David is a software engineer at Zendesk, with a Bachelor of Computer Science from the University of San Francisco.

David has gained valuable experience from the tech industry. By incorporating these best practices, he hopes to create the highest quality learning experiences possible.

Feel free to connect with David! He is always curious about the cool project you're working on. And he loves to discuss ideas on how to build impactful technology.

Visualizar o perfil completo

Habilidades relacionadas

Tecnologia Desenvolvimento web Vuex

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. Prévia de base: Bem-vindo à Base Estelar, a maneira mais rápida de gerar seu esquadrão de personagens de Star Wars. Funciona assim. O carrega três caracteres no carregamento inicial. Temos Luke Skywalker, Chewbacca e Han Solo, alguns favoritos dos fãs para começar. No entanto, se você quiser trocar um caractere com um aleatório para a base, basta clicar no cartão desse personagem. Você continua indo nesse cartão até que você tenha um que você ama. Um aplicativo de segunda visão irá criar juntos você aprender em solidificar conceitos de visão mais fundamentais . Além disso, você aprende a trabalhar com um A P I, a fim de obter dados dinâmicos do molhado. Além disso, uma nova ferramenta para criar aplicativos de visualização será introduzida, chamada View Klay. Isso configura automaticamente projetos de exibição e nos dá um monte de recursos úteis para o desenvolvimento de visualizações . Com isso dito, vamos começar 2. Configurando base de estrelas: Muito bem, vamos começar a preparar esta aplicação de vista baseada em estrelas. Primeiro, precisamos ter certeza de que temos a ferramenta de visualização Klay instalada em seu sistema. Agora, a vista Kelly é uma ferramenta de linha de comando que nos permitirá configurar projetos de visualização inteiros com comandos simples. Então vá para o seu terminal e execute este comando, a fim de instalar a vista limpa, use NPM, que é nós Gerenciador de pacotes, NPM, Instalar, Ver, Dash Klay e Dash D, o que significa que vamos instalar globalmente no nosso sistema. Assim, podemos acessar para limpar a partir de qualquer pasta em nosso terminal para inicializar um projeto vista . Certo, então este roteiro vai demorar um pouco. Não deve demorar muito, mas vai criar a visão Cleave para nós para que você possa ir em frente e postar vídeo. Eu teria pulado em frente através de alguma magia de edição. Assim, vocês terão que assistir toda essa instalação. E quando você terminar, você deve obter uma saída em seu terminal que é muito semelhante a isso. Agora vá para o seu diretório para criar projetos de exibição. Se você criar uma pasta de aplicativo para armazenar todo o seu exemplo de exibição, aplicativos navegarão até esse diretório. Agora vamos executar um comando fácil para tratar um projeto de exibição baseado no pacote Web, modelo simples de vista para executar view e ele e, em seguida, foi pacote simples, que significa que estamos usando views. Pacote web, modelo simples. E vamos ligar para o Projeto Base Estelar, que é a última coisa em nosso compromisso agora. Um pacote em si é uma ferramenta que nos permite lançar um servidor para hospedar nosso casaco de visualização e ver edições da atualização do aplicativo em tempo real. Então agora você vai encontrar uma série de perguntas, e você pode simplesmente continuar pressionando Enter para cada uma para pular cada etapa. Agora, se todas as direções vamos navegar para o diretório da base estelar que foi criado. Execute a instalação do NPM. Mas para criar a pasta Node Modules para nós, que está cheia de arquivos de script de trabalho importantes que nos ajudarão a executar nosso aplicativo. Se você estiver instalando o NPM, o comando ainda está em andamento. Vá em frente e pause o vídeo e retome uma vez que sua saída se pareça com isso. Tudo bem, agora que você está de volta vai finalmente executar o último comando para ver o templo. Seria aplicação em ação para executar NPM executar morte. Isto vai lançar uma janela para nós. E aqui vamos nós. Temos a nossa aplicação baseada em estrelas e boom! Muito agradável. Você vê o aplicativo padrão do modelo simples do pacote Web, que está apenas lá. Documentação útil e um monte de links e incrível. Temos uma visão básica e aplicação MIT indo que criamos a partir da nossa visão limpa. Então, agora que temos nosso aplicativo configurado, vamos passar a configurar o projeto real e anotar o código para a Base Estelar. 3. . Arquivos Vue: Vamos começar a codificar a Base Estelar. Vá em frente e abra o código para este aplicativo em seu editor de código e também tenha uma janela em execução onde você executou o NPM. Faça o Devin no seu terminal. Dessa forma, você pode ver quaisquer alterações que fazemos para este aplicativo. Agora, se você entrar na pasta Origem, você notará imediatamente um novo tipo de arquivo com a exibição de ponto de extensão. Os arquivos de visualização têm três seções principais para ele. O script de modelo e a seção de estilo. A seção Modelo nos permite especificar como queremos que nosso HTML procure o componente de visualização específica . As perdas de seção de script realmente criam instâncias de exibição e componentes para tornar os modelos interativos. Saw seção funciona exatamente como CSS, onde podemos definir nomes de classe para dar seções do modelo alguns diferentes. Parece tudo bem para começar a desenvolver este aplicativo, vamos fazer algo louco. Vamos excluir todo o detentor da fonte. Isso é certo. Exclua toda a pasta de origem. Então pegue uma fonte e exclua. Agora, a maneira certa de entender verdadeiramente a visão é entender as coisas do zero . Vamos querer ter certeza de que sabemos como cada linha funciona. Então, uma vez que você excluir essa pasta de origem. A primeira coisa que vamos tomar é criar nossa própria pasta de origem vazia. Então vá para o seu aplicativo baseado em estrela, faça uma nova pasta e chame-o de fonte ou S R C. Vamos agora criar um arquivo Js ponto principal. Então obtenha um novo arquivo fonte, ponto principal Js e o topo importará o módulo de visualização. Então, vamos importar a vista da vista. Então vamos definir uma nova visão. Instância os alvos do elemento aplicativo em nosso índice dot html para dizer nova vista. Mais uma vez, leva um objeto de opções. Um elemento que queremos segmentar é o i d. Mas o nome do aplicativo tão rapidamente vamos dar uma olhada neste índice dot html cinco. Na verdade, você vê o DIV com a idéia de aplicativo em seu índice html que precisamos segmentar com a nossa instância vista , você também vê um script muito interessante com a fonte de barra dest barra construir A. J. S. Este script é realmente gerado automaticamente pelo nosso servidor web pack Deb. Quando executamos NPM executar morte, o script é modificado ponto Js representação de todos os arquivos de visualização ponto e arquivos javascript que escrevemos para aplicação. Se você der uma olhada no arquivo Web packed dot config dot J s, você descobrirá que o caminho de saída para a pasta é slash dist. E o nome do arquivo é construir ponto Js. Agora, se você quiser uma compreensão mais profunda de como o Web pat funciona, então eu definitivamente recomendo meu curso o script de trabalho completo e tutorial TSX, incluindo Is sete e React no final deste curso. Você também encontra uma palestra, incluindo um desconto sobre ele, então vá em frente e confira lá fora. Nesse curso, passamos pelo Web Pack e configuramos este servidor de desenvolvimento ao vivo a partir do zero. Portanto, é realmente útil para entender como os arquivos Js de configuração do pato do pacote Web funcionam e também torná-lo personalizado. Tudo bem, seguindo em frente. Vamos agora criar nosso próprio componente de visão Abdullah ao lado do ponto principal Js. Tão boa fonte. Nova vista de ponto de arquivo Muito legal A partir desta ardósia em branco, vamos adicionar algum imposto de modelo. Este modelo será o que acaba sendo mapeado para fora para o componente apt up view quando renderiza na tela para ouvir um template emparelhado com uma tag template dentro deste template agora aditivo com a idéia de que este será o elemento que nossa visão futura Anexar é, também. Então faça uma div cujo eu tenha igual pé para cima. Agora vamos adicionar alguma funcionalidade de visualização para a parte de script da nossa visão ponto longe. Então, mais uma vez precisamos de um par de tags de script, e este par de tags de script também irá executar algum JavaScript para tocar a interatividade para o nosso modelo, Elements disse, o início irá exportar um novo objeto padrão, que se torna a nossa visão. Instância. É bons padrões de exportação e em todo o objeto NT. Agora o nome de seu objeto de exportação será em, e então nós também vamos incluir uma função de dados. Agora, ao contrário de uma instância de exibição, não podemos usar um objeto de dados como componentes de exibição. Temos que usar uma função de dados que em si retorna um objeto interno representando-me, os dados que queremos para este componente. Por enquanto, teremos apenas um título para o aplicativo chamado Gerar sua equipe para fazer uma função de dados. Não se esqueça da palavra-chave de retorno para retornar o objeto interno real. O título é gerar sua equipe. Tudo bem. Agora, tudo o que resta a fazer com este componente APP é aproveitar a parte do título dos dados e fazê-la aparecer em nosso modelo. Então adicione à frente de três elementos do Div e dentro nós usamos o bom bigode velho em relação para inserir a cadeia de título em nosso aplicativo. Então tinha um três. Vamos usar bigode e tribulação e colocar o título. Finalmente, vamos aproveitar o método de renderização para instâncias de exibição e usar renderizado para realmente lançar esse componente de exibição abduto na tela. Vá para o ponto principal Js porque é isso que usamos o método de renderização e tem um parâmetro que cuida da renderização real e a criação do elemento e enfraquecer. Titular de qualquer coisa. Está no campo de renderização. Então temos uma função de seta interna com um parâmetro e vamos chamá-la de H. Pode realmente ser qualquer coisa que quisermos, mas H é um padrão padrão. Deixe-me dizer h queremos renderizar o aplicativo agora antes de renderizar o aplicativo que provavelmente pensando , É claro que temos que importar o aplicativo tão bom no aplicativo porta de AP Top view. Vamos salvar isso e à medida que recarregamos lá, temos gerar sua equipe aparecendo na tela. Muito legal, exceto que não parece tão limpo como antes, então vamos cuidar de algum estilo básico ao lado com CSS. 4. Estilo básico com Css: Vamos garantir que a Base Estelar fique bonita. Não queremos perder no concurso de beleza. Afinal de contas. Uma das coisas mais rápidas que podemos fazer é em uma biblioteca CSS já bem feita para o aplicativo. Não, estou me referindo a Boot Shop, cujos estilos rapidamente transformarão isso em um aplicativo de aparência profissional. Então você pode procurar uma foto de inicialização, começar a encontrá-los CSS unificado, caindo mais uma vez de on-line, ou olhar para trás para um projeto anterior que já o tem. Por exemplo, observe mestres índice dot html. Vá em frente e copie esse longo CD Max e link bootstrap, e vamos colocá-lo em estrela base índice html. Ótima. Então é recarregar, e isso já parece melhor. Agora ainda não está certo. Então vamos em nossa própria folha de estilo agora e construir classes desnecessárias e estilos personalizados adequados às nossas necessidades para criar um próximo conjunto. arquivo CSS, bem próximo índice dot html estava bem. Starbase novo ponto de índice de arquivo CSS Primeiro acima será alvo o componente corpo e dar-lhe um fundo escuro . Então não exatamente preto, mas uma cor muito escura. Então, um 263238 baixo e, em seguida, vamos segmentar o nosso componente de anúncio. Então libra em tal se referiu a um com a idéia de que. Devo dizer que a família das fontes é Avenir, cujo apoio é Helvetica. Quem está de volta? É Ariel, cujo apoio é San Serif. Quando eu digo backup, o aplicativo vai primeiro tentar carregar a diversão Avenir, mas se isso não carregar, então ele carrega Helvetica. Agora, se você não consegue achar isso além de carregar aéreo, então ele finalmente carrega Sand Saref. Em seguida, temos uma propriedade de suavização de fonte kit Web Anti a mentirosa, que irá completar o nosso Funt real. Então temos uma fonte mas os X suavização, que continuará a nos dar algumas noites ao redor para o nosso Funt. Eles estão online, tudo para o centro. Vamos certificar-nos de que a cor sobre o texto é branca, para que apareça contra o nosso fundo escuro. E então queremos ter certeza de que o componente AB não está realmente tocando o topo, então vamos dar-lhe uma margem superior de 60 pixels. Agora, Como você diz isso, ele não recarrega na tela ainda, porque precisamos ir para indexar html e adicionar o link de folha de estilo real que se refere ao nosso arquivo CSS ponto índice local para fazer um link de folha de estilo real, e, em seguida, vamos nos referir ao ponto de índice local CSS. Vamos salvar e recarregar. E enquanto nosso aplicativo já parece bom, então nenhum de vocês cuidando do estilo, vamos passar a dar à Starbase alguma funcionalidade real . 5. Apresentando a API: Bem-vindo ao Star Wars, AP I. Este FBI nos permite acessar vários pontos finais para pegar informações sobre vários personagens, planetas, naves estelares e outras coisas legais do universo Star Wars. Além de todas as informações gratuitas que obtemos sobre este mundo incrível, uma das melhores coisas sobre este um p i. é que palavra-chave livre. Não custa absolutamente nada para usar. Nenhum registro para um código de chave é necessário, e ele é criado exatamente para fins de aprendizagem. Perfeito para nós. Então, com isso em mente, vamos chegar ao código e aprender a interagir com este um p I A direito dentro do nosso aplicativo baseado em estrelas e apenas para referência, ele está disponível em S W a p i dot co. Então vá para o componente de vista abduto e ao lado da função de dados irá adicionar um campo de métodos, que por enquanto será um objeto vazio. Ok, vamos agora criar nosso primeiro método chamado fetch caractere, que usará o A p I para pegar alguns dados. Não percebo como uso a palavra “buscar”. Bem, isso é exatamente o que vai tirar proveito da maioria dos navegadores modernos neste momento. Suportar o uso do fetch a p I em JavaScript para lidar com solicitações da Web. Agora, espera. Espere um minuto. Quais são as solicitações da nossa Web? Você pode fazer ótimas perguntas. Para dizer de forma simples. As solicitações da Web são maneiras pelas quais o código pode interagir com endpoints online. Mais comumente, há a solicitação get wet, que simplesmente recebe informações como arquivos de dados HTML ou JavaScript de um servidor. Também é usado com bastante frequência o post Web request, que envia informações para um servidor para que eles possam armazená-lo em um banco de dados ou um código de resgate com ele. Para os nossos propósitos vai tirar proveito dos pedidos get, a fim de pegar informações sobre o personagem que queremos do Star Wars. A P I. Vamos usar um buscar um p I chamando a função fetch. Digamos que temos palavra-chave buscar não a função fetch como dois parâmetros. O primeiro é o endpoint real que queremos atingir. O segundo é muitas vezes é objeto onde especificamos que tipo de solicitação Web que pretendemos usar. Vamos bater a Guerra das Estrelas por enquanto. Então, vai. Http barra s w a p i dot co barra ap I barra pessoas e, em seguida, para o segundo parâmetro terá um objeto de opções com o método get request especificado. Vai dizer que o método é ficar ótimo. Agora isso pode, por si só, começar a extrair alguns dados do A P I. No entanto, ainda precisamos de uma maneira de lidar com os dados de retorno. Isso afeta a função realmente retorna o que é chamado de promessa JavaScript, que é apenas uma maneira de representar um pedaço de dados em JavaScript que fica em para algum valor futuro pendente. No nosso caso, esta promessa é perfeita, já que não podemos saber com certeza quando este um p eu vou retornar os dados. Pode levar algum tempo, mas queremos realmente executar algum código quando recebemos os dados para lidar com uma promessa, usamos uma declaração dot ven e argumentando função inter árabe assim. Então, em um então para a busca e vamos salvar a resposta e, em seguida, você ir em frente e ponto cônsul log essa resposta Agora, Na medida em que o teste vai, vamos adicionar um botão rápido ao nosso modelo que nos permite chamar o método fetch character e ver o que acontece. Então, após o título, vamos adicionar um botão rapidamente irá certificar-se de que ele parece bom, então classe é igual botão e botão primário. Vamos apenas dizer teste buscar caractere e dentro teremos a nossa visão no manipulador Clique para chamar , buscar caractere. Então, agora que temos essa funcionalidade, vamos para o nosso aplicativo. Vá em frente e inspecione o elemento. Então, dessa forma, estamos mantendo o controle do que está acontecendo no console e vamos clicar buscar caractere. Então lá temos uma resposta com o tipo. Claro que você é. L cabeçalhos um elemento do corpo, o que é muito legal. Agora você vai notar que de fato temos uma resposta, o que é incrível, exceto que seu conteúdo não é exatamente o que tínhamos em mente. É bem complicado. Nós queremos em opções Objeto mostrado assim do pântano um p I. Agora, como nós realmente agarrar isso? Bem, felizmente, esta resposta aqui tem um ponto Jason Método dentro de seu protótipo, o ponto Jason método retorna são fluxo legível de dados na propriedade body de uma resposta em um objeto Jason JavaScript. Então ele transforma este corpo bem aqui, que é um fluxo legível em algo que podemos realmente usar dentro do nosso código. Este Dajae viu método em si retorna uma promessa tudo o que precisamos fazer é simplesmente ter outro ponto então declaração, e desta vez vamos registrar a resposta de um parâmetro que vai chamar Jason. Assim, com nossos pontos em vez de registro conselho, ele vai retornar resposta que Jason, em seguida, dentro da outra declaração que não temos um manipulador Jason interior para uma função de seta interna . Bem, simplesmente confidente log Jason, Vamos salvar e que agora temos um método atualizado. Então vamos recarregar. Vamos testar o caractere da correspondência. E lá temos um objeto, que é exatamente o que queríamos. Então aqui temos uma contagem de pessoas porque esse é o número de resultados que obtemos. Nós temos um monte de personagens diferentes dentro de nosso povo e ponto. Então vamos ver o que acontece quando é hash an i d até o fim disso. Então, com um objeto atualizado, isso é teste de recarga para cada caractere. Então, com Luke Skywalker, conseguimos o objeto que queremos. Então temos a cor dos olhos de cabelo azul, cor loira, sexo, masculino. Ele tem um sabre de luz azul que não está listado aqui, mas pensei em jogar isso. Mas de qualquer forma, temos o que desejamos com a nossa função de busca tão legal. Agora temos interatividade com um A P I dentro do nosso arquivo de visualização de pontos, o que é incrível. Vamos agora continuar desenvolvendo base estelar e colocando este método de busca de personagem em um componente de personagem dedicado para que nós realmente obter alguma frente e atualização em nossa tela. 6. Criando um componente de personagem: com a Base Estelar. Queremos ter vários personagens na sua candidatura. Dessa forma, esse título de Gerar sua Equipe tem algum significado. Todos esses personagens, e podemos ter qualquer número deles vai executar o mesmo casaco afeta. No entanto, não queremos ter que escrever a mesma função de busca mais de uma vez para cada caractere gerado. Então, o que podemos fazer como solução? Agora? Este parece ser o momento perfeito para criar um componente de caractere view para a nossa aplicação. Ele está em uma pasta Componentes para o Diretório de código-fonte do AB e cria um arquivo de exibição de ponto de caractere . Vamos para a fonte de novos componentes de pasta. Vamos fazer uma vista de ponto de caractere foul nova vista de caractere de arquivo. Agora vamos adicionar o modelo e scripts para o componente de caractere. Por enquanto, vamos adicionar um modelo com uma definição interna em branco, e descobriremos como estruturar o personagem. Uma vez que tenhamos nossos métodos e dados todos configurados dentro da seção de script no modelo, vamos dar esse fechamento correspondente e, em seguida, uma seção de script. Claro, não se esqueça que intuitivo com um modelo por enquanto. Tudo bem, então agora é hora de adicionar a parte de scripts do componente, que irá adicionar alguma interatividade de visualização. Sempre. Queremos inicializar isso como um componente view, então vamos exportar um objeto padrão onde podemos colocar todas as opções para nossa funcionalidade de exibição . Então, mais uma vez, exportar padrões em objeto vazio. Primeiro, vamos dar a este objeto de opções os dados do componente de caractere Alguns dados iniciais dentro de uma função de dados . Lembre-se, temos que retornar um objeto dentro dessa função. Por enquanto, teremos um campo chamado personagem, como você deve ter adivinhado que mapeia para um objeto vazio e certifique-se absolutamente de não esquecer o retorno interno. Palavra-chave. Então aqui temos nossa função de dados. E não se esqueça que a palavra-chave return e foram retornados um objeto com a chave de caractere com um valor de um objeto vazio. Por enquanto, tudo bem. Agora queremos adicionar esse método fetch do componente APP, o lugar de dentro do nosso personagem. Então, primeiro em um objeto de métodos ao lado da função de dados, e então vamos cortar o método de busca caractere que criamos anteriormente Interact, ver componente e colocá-lo diretamente dentro dos métodos para exibição de ponto de caractere. Então, veja AB. Vamos tirar o caractere buscar aqui salvar isso e colocá-lo dentro da vista de ponto de caractere. Ótima. Com este método adicionado ao nosso componente personagem, vamos fazer algumas alterações, para um irá modificar o método para atualizar a parte do caractere dos dados com o retorno Jason. Então, em vez de registro confidente, Jason vai dizer que este personagem DOT é igual ao Jason. Em segundo lugar, irá colocar um dados de caracteres dentro do nosso modelo em alguma sintaxe interpolada bigode apenas para verificar o conteúdo por enquanto. Então, digamos que dentro deste bigode vai colocar caráter. Tudo bem, estamos quase prontos para adicionar este componente ao nosso aplicativo, exceto que há uma pergunta que você pode ter em mente. Não há nenhum botão no componente de caractere. Então, quando é que este método de busca de personagem vai disparar? Sabe, excelente recordação de pontos. A discussão anterior de ganchos de ciclo de vida bem não vai tirar proveito do gancho de ciclo de vida criado , a fim de disparar algum código quando este componente de caractere é feito para aplicação. Então adicione uma função criativa simples e certifique-se de chamar este caractere stop fetch dentro após métodos em uma função criada, assim como dados. Tem que ser uma função que chamamos isso não muito caractere que vai se referir a esse caractere buscar que temos dentro de métodos. Excelente. Finalmente, vamos importar este novo componente de personagem dentro do nosso aplicativo real. Então, cabeças na vista superior e acima do padrão de exportação precisamos importar caractere de Vamos encontrar a pasta Caracteres, Excuse Me Components pasta e, em seguida, localizar ponto de caractere Exibir. E agora precisamos especificar esse componente como parte real de sua aplicação. Fazemos isso com os componentes Campo da Vista. Objeto Options. Então, em vez de métodos, digamos que agora temos componentes. O primeiro 1 irá listar. Será caráter. Agora, graças a um imposto de Essex encurtamento doente sobre a atribuição de estruturação em objetos, podemos mapear a cadeia de caracteres para o componente de caractere automaticamente, apenas selecionando, colocando caractere. Tudo bem, vamos colocar o botão de teste com uma ocorrência do componente de caractere. Vamos tirar este botão e, em seguida, vamos substituí-lo por uma tag de auto-fechamento de personagem. Vamos salvá-lo. Isso é recarga. E lá vamos nós. Nossa função fetch funcionou no gancho criado. Nosso componente de caráter é muito doce. Agora temos um pedaço de dados muito louco aparecendo em seu aplicativo agora. Mas ah Hasam, que re criou o componente personagem que agora usa o Fetch A P I. E podemos usar isso para chamar a função fetch quantas vezes quisermos com vários componentes de caracteres. Vamos avançar adicionando mais comportamento a este personagem. 7. Comportamento de caracteres de finalização: Acabamos de criar um componente de caráter muito doce e útil. Mas você deve ter notado um problema bastante flagrante com este personagem. Só estamos importando dados de Luke Skywalker. Isso ocorre porque nós apenas especificou nossa solicitação get para puxar dados para a primeira entrada para a parte de pessoas do A P I. Vamos precisar de alguma maneira de especificar números diferentes na solicitação get é que a forma que podemos obter dados quatro diferentes personagens. Felizmente, poderíamos tirar proveito do campo adereços do componente View, a fim de atualizar o método fetch com o número que passamos para ele. Então vá para o ponto de vista do personagem. Vamos adicionar esse campo de adereços logo acima dos dados. Lembre-se, é um arranjo vazio por enquanto, mas então vamos colocar uma corda I D. E não se esqueça da vírgula. Ninguém precisa atualizar o método fetch character para pegar um parâmetro de I D e chamar o endpoint fetch com uma variável interpretativa i d. em vez da codificada. Então buscar caractere e seu parâmetro é I D. E, em seguida, dentro da string buscar. Vamos transformar isso em um anel de seis, então ele substituiu as cotações regulares por ticks de volta, em vez de um vai interpretar tarde a variável I d. usando a sintaxe Dollar Curly Brace. Ótima. Agora há outra alteração para o componente de caractere na chamada inicial de Fetch Character no gancho criado. Certifique-se de especificar este ponto i D no campo de parâmetros para que nós re passar um I D válido para buscar caractere. Certo, antes de salvarmos esse arquivo, volte para agir. E há uma peça crítica faltando na instância de nosso componente de personagem no aplicativo. É uma boa visão de sequestro, e você notou que nosso personagem agora precisa de adereços. Neve irá adicionar v ligação de I D a um. E a sintaxe abreviada para V Bind é apenas dois pontos regulares. Então lembre-se, nós podemos tirar o V Bind porque vista vai reconhecer Colon como um V ligar-nos como nós salvar apt up vista, e nós salvar personagem ponto vista quando nós recarregar lá, nós ainda temos Luke Skywalker. Exceto que desta vez estamos realmente procurando com o passado distante de nossos adereços. Muito legal. Então, agora a grande coisa sobre ter essa opção da idéia de adereços é que agora podemos usar algum loop para criar vários componentes de caracteres que levam diferentes IDs. Então, dentro da visão abduzida, vamos criar uma lista de identidades dentro de nossos dados para um certo número de caracteres que gostamos de carregar em seu aplicativo. Então, ao lado do título, vamos adicionar um campo inicial de ideias. Bem, disse que a uma matriz terá ganho 13 e 14 que são alguns personagens legais que você verá em apenas um momento. E agora, em seu modelo, vai envolver este componente personagem com um Div externo com a classe de carvão MD 12. É um relógio negativo todo MD 12 e, em seguida, vamos usar o loop quatro para percorrer o I DS nas idéias iniciais ou taxa nos dados. Um i d. cada vez passando o I D para o nosso componente de personagem personalizado. Então tire o caráter. Vamos colocá-lo aqui dentro irá colocar um V quatro diretiva loop os quatro i d. Em i ds iniciais, que é o que temos em dados e, em seguida, ainda compramos o I D. Mas desta vez vai passar este I d para o nosso I d ligação. Vamos salvar e ver se temos mais de um. Agora deixe-me fechar o cônsul bem rápido. E então temos um Luke Skywalker para chibok A, que é a idéia de 13. E finalmente, nosso último objeto. Hans Solo é muito legal. Temos três personagens incríveis aparecendo em nosso aplicativo baseado em estrelas. Agora, para aqueles de vocês com seu cônsul ainda aberto ou seu sellout terminal, vocês notarão que recebemos um aviso aqui, e ele diz que a lista de componentes deve renderizar com antes deve ter chaves explícitas. Agora, os principais atributos permitem facilitar a classificação, remoção e adição de dibs para visualização para obter este aviso para desaparecer. Há uma solução muito arrumada. O loop for realmente usa um segundo parâmetro opcional, que mantém o controle do índice filho dentro do loop. Então, ao lado da porção i D do V quatro loop em um parâmetro de índice, ambos dentro de um conjunto de parênteses, então mais uma vez envolveu este I d com um conjunto de parênteses, e agora podemos ter um segundo parâmetro de índice e agora irá vincular a chave de este componente para o índice criado dentro do quatro loop Sochi é igual ao índice. Como economizamos em uma recarga, você percebe que estão aviso desaparece agora eu concordo que isso parece muito horrendo no momento. Refiro-me a nós programadores. Todo esse formato de notação de objeto JavaScript pode parecer muito doce, no entanto. Queremos que outras pessoas usem este aplicativo e vejam uma interface limpa, então chegaremos a isso em apenas um momento. Mas antes disso, vamos adicionar apenas uma peça de funcionalidade rápida ao aplicativo que nos permite alternar as horas do comparador com uma aleatória baseada em um clique. Então, volte para o ponto de vista de caracteres, e vamos adicionar outra função chamada caractere switch. Assim, na visão de ponto de caracteres irá adicionar um método de caractere switch, ea função de caractere será realmente bastante simples. Primeiro irá gerar um i. D.aleatório D. de 1 a 83 porque há 83 caracteres no A P I. E então vamos lembrar a função de busca do caractere com aquele i D. aleatório recém-gerado de 1 a 83 porque há 83 caracteres no A P I. E então vamos lembrar a função de busca do caractere com aquele i D. aleatório recém-gerado. Está prometido. Vamos aleatório i d. chão pensamento matemática igual, que, quando você tem um número decimal, leva o inteiro inferior Assim, por exemplo, 7.9 na verdade tornar-se sete ou 13.12 torna-se 13. Isso irá gerar um número aleatório de 0 a 1. Então isso nos dá algo como 0,2 ou 0,4 ou 0,999 quase cinco esse número por 83. Eles vão adicionar um a isso porque uma vez na Flórida queremos ter certeza de que vamos chegar de 1 a 83. Ele finalmente irá adicionar um manipulador de cliques para o nosso personagem, DIV. Isso chama esse novo método de caractere de alternância. Mas não se esqueça de chamar este ponto Fitch personagem no i d. aleatório e, em seguida, é claro, queremos chamar caractere switch com o def externo como nós salvamos. Quando eu clicar nisso, temos um novo personagem. Mais uma vez, posso continuar e conseguir novos personagens. E então, no geral, eu gerar uma equipe de personagens de Star Wars que eu gosto de um excelente Vamos passar para um dos aspectos mais importantes do aplicativo, na verdade, tornando-o bom, estruturando nosso componente de personagem próximo 8. Estruturando os personagens: Ok, agora que temos a funcionalidade para baixo para aplicação, a estruturação real e template ing dele permanece. Vamos primeiro atacar. O componente de visualização de pontos de caracteres aproveitará alguns estilos de bootstraps. Ajude-nos a criar rapidamente uma representação alternativa a partir desses dados de caracteres que são atraentes. Primeiro, mude você no geral. Div. Ter uma classe de carvão MD. Quatro. Mitchell se encaixam bem em nosso Outer Coal MD 12 que ele criou em seu componente AP para chamar MD quatro que terá um intuitivo com a classe cartão de personagem Erube outro DIV com uma classe chamada Khar Block. O bloco de cartas é uma classe loja de livros, enquanto cartão de personagem é aquele que vai nos definir. Assim, o 1º 1 é cartão de captura e dentro temos o nosso bloco de cartas. Vamos apagar esse personagem interpolado por enquanto. Em seguida, vamos adicionar uma parte de título do cartão de personagem com o cartel para a classe, e então vamos passar por todos os campos relevantes do personagem e usar cláusulas de texto de cartão em elementos de parágrafo. Então, primeiro temos à frente ou quatro elemento com uma classe de título do cartão, eles irão inserir o nome do personagem e em seguida temos algumas tags de parágrafo com uma classe de texto do carro, e vamos apenas passar por cada um. Vamos demorar um pouco para datilografar, mas vai valer a pena. O 1º 1 é altura, então vamos encontrar o personagem, não a altura. Em seguida, outra classe de texto de carro vai haver para estes. Então temos bagunça, que é o caráter dot mus. E por que não adicionamos também o campo de medição? Assim parece bom. Então K G é a bagunça. É medido em centímetros para a altura. São métricas mais globais. Temos cor do cabelo, então mais uma vez temos uma classe de texto de cartão. Temos a nossa cor de cabelo para isso, e vamos inter placa cor de cabelo personagem, que é uma cobra invólucro. E então, é claro, o último aplauso é igual ao texto do carro. Vamos em frente e inserir a cor dos olhos, você sabe, só porque você não pode tão caráter ponto cor dos olhos e ótimo. Finalmente, vamos adicionar essa classe de cartão de personagem ao nosso personalizado, não CSS, que realmente amarrará tudo junto. Muito simplesmente. Vamos dar a esses cartões uma bela borda verde, assim eles são facilmente distinguíveis. E então vamos arredondar essa borda e, em seguida, vamos certificar-se de que esses carros parecem clicáveis com um ponteiro do cursor, então vá para o índice CSS. Vamos adicionar essa classe de cartão de personagem. Torná-lo kebab, encapsulado a borda será de dois pixels de largura. Vai ser um sólido. E aqui vem as nossas fronteiras verdes. Então Capital quatro, FC 08 D agradável vista verde cor temática. Um raio de borda será de quatro pixels. Eu sinto que isso só parece bom com o tamanho dos cartões vai acabar gerando o cursor Pointer dá-lhe um olhar clicável. Vamos guardar isso e recarregar. E, claro, temos que salvar o ponto de vista de caracteres, então certifique-se de salvá-lo. E enquanto isso parece muito melhor já, então uma vez que clicamos neles para continuar a regenerar novos personagens eventualmente temos uma equipe de personagens que você pode continuar encontrando até que você realmente os ama. Para mim, pessoalmente, gosto da ideia 13 e 14 porque gosto do Han Solo Luke Skywalker. Chewbacca etcetera camadas lá em algum lugar, também. Mas eles têm dróides lá, um monte de outros Jet I e outros personagens sentados para você navegar. Tão rápido. Eu também vou diminuir o zoom . Dessa forma, você pode ver o outro verdadeiro estilo do aplicativo. E lá estão eles, os cartões bem ao lado do outro, não totalmente expandidos. Você pode ver que o carvão MD para em ação. Então lá vamos nós. É isso para a aplicação da base estelar. E eu espero que você realmente tenha gostado de construí-lo e que você tenha uma noção real de como os aplicativos de visualização seriam parecidos em um ambiente realmente empresarial ao lidar com Web Quest on-line e AP olhos excelente trabalho e parabéns pela construção da base estelar.