Vue JS – Princípios básicos para iniciantes com exemplos

1. 01. Introdução Introdução: Olá e bem-vindo ao curso de fundamentos da View Jay para iniciantes. Meu nome é quente. Ela e eu estamos felizes em tê-lo aqui. Então, sobre o que é esse curso? Neste curso, aprendemos sobre os fundamentos de você. Jay é do zero. No final deste tribunal, você terá um forte controle sobre os fundamentos, bem como você pode começar a desenvolver seus próprios projetos em vista. Js pré-requisitos. Para entender e aproveitar ao máximo as pontuações, você precisa saber html, CSS e JavaScript. Portanto, estes são os tópicos abordados no curso. Então primeiro olhamos para a guerra diferentes e estruturas, e entre esses amigos e frameworks, por que você precisa escolher o futuro? Sim em. Em seguida, vamos adicionar vista em um site. Então olhamos para as outras propriedades. Em seguida, vamos continuar a olhar para a vista, ver Ally, que é uma ferramenta muito útil para criar projetos de visualização. Em seguida, examinamos as propriedades mentais do que as propriedades computadas. Eles também vão olhar para a ligação de dados para um eventos de ligação de dados e até mesmo modificadores. Eventos de teclado, eventos de mouse, propriedades de observação e conceitos básicos de componentes. Em seguida, procederemos à análise das condições, renderização de adereços e eventos personalizados antes das diretivas. Ganchos de ciclo de vida visualizados. Sou programático, roteamento, roteamento dinâmico. Mas então teremos mais alguns exemplos sobre roteamento e roteamento dinâmico. Em seguida, olhamos para mixins. Em seguida, analisaremos como encontrar empregos em futuros, mesmo que seja um trabalho em tempo integral ou freelancing. Talvez olhar para a água, os sites e os recursos que você pode usar para obter Broken View Jr assim como este. Na próxima palestra, eu vou estar dando a você disposto a tomar uma positividade tablet onde você pode encontrar todo o tribunal para cada palestra. Tudo bem, vamos começar. 2. 02. Estruturas de fronte: tão poucos dias é um amigo e quadro. Então, o que é um amigo e quadro? Tão freqüente Chuva pode ser descrito como, ah, coleção de bibliotecas ou coisa de blog, termos muito mais simples que são usados em conjunto para criar muito mais eficiente e mais rápido do que publicação ou site. Então esses sites foram criados usando amigos e livros de trem, um aplicativos Web sem fio ou recaída. Não é para essas obrigações? Chame-nos SPS reunião aplicativo bit único. Então, a partir de saber na indústria, existem vários frameworks diferentes entre eles, os mais populares são e visão reagindo, que é o que vamos analisar hoje. Então, para entender melhor qual é a melhor aplicação única? Eu era adorável. Sítio Web. Comece a olhar para um pequeno exemplo. SPF era placas, então vamos para o Amazon Norton. Então William faz para eles Amazon. Eu só quero ir para algumas páginas, por exemplo. Digamos que eu vou no Amazonas. Seja assim sempre que eu clicar na Amazon pagar, você pode ver que toda a barra de navegação, bem como todo o país abaixo ele recebe concurso real ou reconstruir a partir do zero. Mas usando impressão e estruturas como reator pescador exibir sites como YouTube Verbal. Por outro lado, o YouTube é um aplicativo de bit único, significa que isso funciona muito para, como sua parte móvel do YouTube. Então, o mesmo exemplo neste caso, quando você vê a barra de navegação, mas como o menu inferior, essas duas coisas, eles são atraídos para a órbita uma vez que a única mudança, mas no YouTube, é um conteúdo aqui entre estas duas partes, geralmente em termos de estruturas front-end estas seções únicas do site como barra de navegação para o seu ou o Saipan, e estes são chamados seus componentes. É assim que dividimos o site em diferentes partes na frente e três meses medida que avançamos, você ouvirá a palavra reclamações muito mais frequentemente. E como você fica muito mais familiarizado, despejado e você, quanto mais prática de diferentes e DreamWorks, você não decide muito mais melhor. Assim, por exemplo, é um navigato, a parte de treinamento do YouTube. Então, o que acontece é que a minha vida se depara há seção de barragens sobre ser todo o site é reconstruído, certo, mas eu navego para a parte de treinamento do YouTube. Você pode ver que apenas uma seção que tem a mudança no conteúdo é traseira ou reconstruída, enquanto o painel lateral e as barras de visão noturna permanecem constantes. Então por que a beleza é tão em termos de francês e frameworks. Falamos sobre sob e reagir e beleza, então esses três são os quadros mais populares lá fora. Então, por que você precisa considerar Buijs entre esses três? Então, uma das razões mais importantes para escolher Huges ou sub-reagir é que é incrível a luz que é passado. É uma comunidade flexível, forte e muito pouca renda. Então vamos esses pontos um por um. Então, como então por que carregar qualquer framework ou biblioteca ou em seu site? Você precisa ter certeza de que a biblioteca do mercado livre adorando é muito leve ou muito pequeno em tamanho. Então isso é algo que o Senhor vê em desempenho muito mais rápido. Então, em termos dessa visão, Jace é extremamente. É conhecido 16 a 20 Gaby, que disse, eu preciso deles tão rápido, já que é muito leve e extremamente rápido. Em termos de fatos, flexibilidade, belíssimo é conhecido por sua flexibilidade. Você pode ser usado para ser menos pregando seu site existente ou como se você já tem um site por aí e você quer ser menos parte dele usando você. Você pode fazer isso. Você pode usar para indicar uma pequena parte do seu aplicativo ou para trazer toda a sua aplicação em torno dele. Então, a visão é que forte e ao mesmo tempo que flexível, comunidade forte. Então ver Jace tem uma das melhores comunidades. Colocá-lo em uma curva de aprendizagem muito baixa significa que não nos pediu completo para aprender. A beleza é como é com raiva ou reagir. Então, para deixar você, você só precisa saber cada telescópio de temporada de demônios, é isso em você mesmo. Tudo bem, então, isso é para este vídeo. Então, no próximo vídeo, vamos analisar como vai colocá-lo em seu aplicativo existente. 3. 03. Virtual DOMs: tudo que eu pouco antes de ir qualquer pé que eu só quero falar um pouco sobre dormitório virtual. Vai ser uma palestra muito pequena. Então cúpula virtual é uma espécie de tecnologia ou um conceito que é usado para manipular Dom real. Então Dom quer dizer o objeto atual mortal. Certo? Então, o que essencialmente esta pedra significa é que o que você vê em sua tela, se a cúpula para todos os elementos que b deck html, todos estes vêm para a cúpula, então vista usa algo chamado cúpula virtual. Então esse conceito é muito comum. Então, outra estrutura que usa a cúpula virtual é reagir. Então o pescador também tem uma espécie de cúpula virtual. Mas não é exatamente para crianças. Ele tem sua própria implementação, então, mas mantendo-a de lado, o que esta cúpula de abutre realmente faz é que é uma espécie de planta. Então, por exemplo, imagine se você tem uma caixa grande dentro desta caixa. Você tem tijolos pequenos e engolidos e você quer organizar todos os tijolos em uma determinada ordem. Então, para fazer isso de forma eficiente, Urinson quebra apenas quando eles não estão em ordem. Então você deixa os tijolos, que estão em ordem, e você apenas move os tijolos, que não estão em ordem. Então isso é algo muito parecido com o que seus médicos fariam? Ele só atualiza um dormitório na peça, que é necessário para que ele não opere o dormitório inteiro. É como atualizá-lo apenas quando é necessário, ou seja, quando estamos mudando coisas no dormitório. O dormitório virtual pode ser editado muito, muito rapidamente. Então, mais tarde, durante a parte de renderização, Virtual Dome descobre os pais WorldCom, ou quais partes do Dominic real ser adolescentes amassando apenas isso. Mas, portanto, essencialmente, tornando-o muito leve e eficiente abordagem. Então você não precisa se preocupar muito com o seu trabalho. Isso é algo que acontece em segundo plano, e você fica assustado a maior parte disso. Mas a coisa é que é bom saber que nada como sala virtual existe nesse tipo . Controlando o seu lixo antes de avançarmos. Estes são os links, Então, para o subgrupo do mundo, é re ponto cego l y barra Eu sou Vicky Ward sub e para o oponível ível que revisto todo o tribunal será hospedado para cada palestra. É um conselho rebatizado Slash e podemos conseguir ajuda. Então, no subgrupo mundial, você pode me enviar uma mensagem. Você pode fazer perguntas. Então é isso que eu vou ver no próximo. 4. 04. Instância de voe e Propriedades de dados: Olá e bem-vindo à sua primeira palestra sobre belezas como discutimos na última palestra . Você Jay é muito flexível, certo? Então, podemos usar vista Jay para adicionar uma pequena funcionalidade no site existente. Tudo o que podemos realmente esperar site completo em torno de Beleza s então antes de ir mais longe e olhamos site completo ou por Bob em torno de você, Jess, vamos olhar para como estabelecer ou integrar huges no site existente. Mas exemplo, se você já tem em seu site demônio e você quer adicionar enorme é sobre ele, você pode fazer isso como assim. Então agora vamos abrir a pasta. Vou criar um novo diretório que diz ver projeto. Vou entrar na caridade dentro do seu território. Vou abrir o cabo visual do estúdio. Então, se você não sabe, este é para o acordo é um coordenador para que ele possa usar texto sublime ou átomos. Então estes são alguns outros co-editores que você pode usar dedo direito nele. Ele corta território soviético. O que eu posso fazer é que eu posso criar um novo índice dot html arquivo é antes de ir mais longe, você pode querer instalar os plugues caindo dentro com o estúdio Tribunal. Você tem esse tipo de como uma pequena opção para extensões dentro de extensões. Eu quero que você instale as vidas por extensão. Este é por aqui. Seria se você pudesse instalar isso, o que ele vai fazer? É como um pequeno servidor local no seu sistema? Então, qualquer que seja o aperto, você está fazendo isso no tribunal, você pode finalmente vê-los em seu site sem ter que atualizar seu site de vez em quando. Certo, então essa é uma extensão útil que você não precisa instalar. Não é. Não é algo de cumplicidade, mas é útil para ter isso na nossa próxima hora. HTML. Vamos ter o modelo para cima para que possamos ter o modelo dizendo o ponto de exclamação na guia. Então, isso obterá o modelo pequeno. Então, antes de entrarmos em alguns dias depois, pegue um pequeno exemplo, certo? Digamos que eu tenha uma etiqueta. Eu não disse nome. Então agora podemos executar este site ou podemos entender o nosso sultão nesta visão metas Eleitoral Um. Agora o que eu posso fazer é executar isso clicando com o botão direito do mouse. Vou ter uma opção dizendo “aberto” com a vida acabada. E se eu clicar nele, deve abrir no noivo. Sim. Então agora podemos ver o nome aqui. Certo? Vou resumir, Ali. Então agora, por exemplo, digamos, quer mudar o conteúdo do tipo H um, certo? Não quero ter nome dentro dele. Então o que eu vou fazer é um monte de script de arquivo que diz que eu tinha uma fonte fora do exterior. Sim, e já que não temos depois da Jess, vamos criar es médios. O que eu posso fazer é que eu posso dar a escotilha um e eu d eu não posso ver o nome, e eu posso vê-lo no interior para fora Georgie s O que eu posso fazer é eu posso dizer documento ponto get elemento por i d. Eu posso ver porta nome no HTML e ele contém o nome meu realmente . Então, se eu guardá-lo e voltar, vou ter o meu nome verdadeiro aqui. Certo? Então isso é algo como você faz em javascript simples em javascript baunilha. Então agora isso é um avião, Jascha ou o próprio livro saltou para fazer as coisas agora. Vamos ver como podemos implementar a mesma coisa com vista. Então, a primeira coisa que vamos fazer é trazer View J um sírio em sua aplicação ou em um site. Se você não sabe o que é o CBN, isso geralmente significa que a rede de entrega de conteúdo, uma rede de entrega de conteúdo, parece complexa. Mas confie em mim, não é. É muito, muito simples. Podemos ir ao site oficial da filha bonita em. Podemos copiar este link para que possamos pegar o link de script em. Você pode voltar e nós podemos apenas colocar abaixo ou sobre o nosso script em. Com isso, temos implementado vista em seu site. Dito isto, Agora precisamos saber como usá-lo. Então, em vez do engate, vamos criar ah def. Isso economiza maldade e dentro do negócio, vamos ter o H um, e é deixá-lo em branco por enquanto, Eu pretendia que eu quero dizer Internet AB lindo. O que precisamos para fazer isso, precisamos criar uma nova visão. Instância que podemos fazer dizendo nova visão e dentro que ele aceita um objeto sobre esse objeto consistem em várias propriedades, então a primeira propriedade importante principal, que precisamos saber sobre é G L. Ele vai ficar para o elemento, certo? Então, basicamente, o que estamos fazendo é que estamos vinculando essa instância de exibição ao vivo. Então, no nosso caso, queremos amarrá-lo através deste mergulho com um copo fora da principal. Então geralmente para vidro, vamos dizer ponto médio, mas se você tiver um eu d fora de mim e vamos vê-lo Hashmi. Mas desde que nós temos vidro, nós estamos indo para ir mas dot então dot inferno é a primeira propriedade desta instância vista na próxima propriedade seria a propriedade data. Então a propriedade de dados é como a propriedade que mantém em todas as variáveis. Então essas variáveis são reativas na natureza, certo? Então, o que significa essencialmente é que essas tabelas de espera, ao usar o modelo, observam as alterações dentro do modelo. Então, se houver alguma alteração em relação a essas variáveis, essas variáveis se atualizam. Não precisamos anexar especificamente nenhum ouvinte de eventos a eles. Eles se atualizam. Daí o SAARC ou variáveis menos reativas em todas essas variáveis são declaradas dentro das propriedades de dados. Então o primeiro disponível que vamos declarar dentro da propriedade de dados é nome e que está convencido de que consistimos em meu nome. Então você precisa entender em vista de que a maioria das coisas estão em formato de objeto, então você precisa se acostumar com isso. Mas à medida que você passa, você se acostuma automaticamente. Então veja como todos os vegetais são declarados assim. Então, se eu salvá-lo agora, eu posso usar esse nome de variável ou a data de um nome de propriedade, HTML interno. Agora, tenha em mente que essas variáveis eu quero dizer todas as propriedades que criticamente dentro sua instância funcionarão somente sob este vivo qualquer que seja o elemento de você anexado. Então, se eu entrar, não disse que posso ver o nome. Então isso é chamado de sintaxe de interpolação. Então, quando você faz isso, o que acontece é que você essencialmente procura um nome de propriedade posterior. I em vez de você instância, nós concordamos um sobrenome núcleo propriedade e, portanto, é valor absoluto fora deste nome sobre este . Então, se eu vê-lo e voltar, devemos ver meu nome e podemos alterá-lo apenas para que entendamos que está vindo da instância view. Certo, agora vamos ver o que acontece se eu tentar usar a propriedade do líder fora do Dev certo? Teremos outro Hitch. Vamos dizer a mesma coisa em Faça o nome. Se eu salvá-lo, vou pegar as chaves também. Porque a vista não está ligada a este elemento, ele só está ligado com os elementos sob esta queda. Essa é a razão pela qual View precisa ter um enraizado nas próximas palestras. Você vai ver que você precisa ter um específico seria se isso pode amarrar a si mesmo debaixo da estrada. Os elementos de água estão lá. Vai funcionar nelas. Então, apenas para recapitular o que fizemos, vamos obter outra instância em vista. Então, neste caso, o que vamos fazer é criar David e eu sair de New Main e dentro do I D. Vamos ver qual deles. Vejamos, meu nome é “Eu sei o que realmente Louis”. Em vez disso, Abdur Jess, criamos uma nova instância vista novamente, então observe que podemos criar várias instâncias de visualização para vários Dave. Podemos dizer que foi novamente, e desta vez vamos usar haxixe porque não nos identificamos lá dentro. Isso muito bom declarado para propriedades de dados. Fomos salvos. Primeiro nome com o sobrenome. Certo, então se eu salvar e voltar, posso usar os nomes do “fazer”. Posso ver o primeiro nome. Eu poderia dar um pequeno espaço e concedeu sobrenome. Então, se eu disser que não voltar, meu nome é quando ela Krishna de modo que é mais instância de visualização de elétrons sobre como as propriedades de dados funcionam. Então, na próxima palestra, vamos olhar para a vista. Vês? Ally, vejo-te na próxima. 5. 05. Vue CLI: então a primeira coisa a fazer é abrir o terminal. Então, se você está no Mac OS são imediatamente próxima máquina, você pode abrir o dominante, mas você se sente no Windows, você abre o comando de então antes mesmo de saltar no terminal. Então a primeira coisa nem J começar ou assim. Se você for para o Norte, apenas adoro aqui você vai encontrar dólar para Mac OS. Mas se você está no Windows, você ganha um dólar para mim. - Não. Então, se você não fizer qualquer uma das distribuições de links, você terá a sua versão particularmente coisas distribuições. Então você precisa doar isso e instalar aquilo. Já tenho a instalação. Não vou instalá-lo novamente. E então podemos instalar a beleza mentira usando o norte. Então, para instalar a visualização CLR, você precisa digitar o seguinte comando. Então npm tipo de instalação em G assim no pagamento roubou hífen JIA temor suculento igual. Então hífen gee indica que é global. Então, instalar para toda a máquina em uma excelente vista Last Eli significa que uma visão morta é o pacote principal não são fatiados Realizar um subconjunto do pacote. Eu já tinha esta instalação por isso não deve demorar muito mais tempo. Tudo bem, assim que estiver instalado. Então não, nós temos os pontos de vista aqui, como em iniciar esse sistema. Então agora podemos usar vista, Veja, aliado para criar projetos de visão também para criativo u barco que precisamos entrar em entrada específica feita. Queremos criar uma vista projetos para mim. Está aqui. Então aqui eu vou criar um novo projeto de exibição. Então, para criar o ponto de vista que você precisa para obter a queda no comando, é vista criar no nome do projeto. Então, para mim, o nome do projeto seria o próximo projeto. Uma coisa a notar aqui é que porque Eli não aceita, Capitão, está no nome do seu projeto. Então, se eu der um “D “maiúsculo, vou entrar nele. O nome não pode mais conter ninhadas do Capitão. Anteriormente responsável induzir uma luz, mas desde idiota para usar uma luz três, não tem sido possível. Assim que esquentarmos e não obtermos a opção de queda para selecionar a predefinição, então preceito não passa de uma coleção de pacotes que vêm junto com um projeto view. Então, só para ver o que todos os recursos são plugins que temos disponíveis. Podemos ir para recursos de seleção manual, então a primeira coisa que temos disponível é Babel. Então Babel é usado para habilidades de combate JavaScript. Então, se você estiver executando um novo navegador JavaScript asiático mais antigo no navegador não suporta os recursos mais recentes sobre JavaScript, Baby irá converter. As versões mais recentes do jazz entram na versão mais antiga. Por exemplo, se você pode trabalhar aqui seis sintaxe em dois anos. Cinco Exit tipescript Você sabe, tipos, teclado ou é batível. Apoie progressivamente, Babs. Então, se você quiser criar o progresso de uma colisão, você pode querer ter um cheque. Duvido que seja um visto fora destes usado para navegação dentro de seu aplicativo. Então, a partir de Noah, muito assim. O que começou selecionado no futuro Biblioteca de Gestão Estate de U Ex para ver vê seus pré processadores são nada, mas ousado e menos assim. Se você não está familiarizado com SAS ou menos, estes CSS três processos que nos ajudam a escrever melhor CSS. Portanto, isso não é absolutamente necessário porque você também pode escrever CSS normal em vista. Mas se você quiser direito, se você quer ter tamanho ou menos suporte. Se você considerar isso, eu vou dizer isso. Linder Sim, terra em agosto daquele teste de urina e reteste. Então, estes são alguns recursos de teste sobre os quais muita conversa no futuro. Então, uma vez que vimos, todas as características necessárias porque Llorente em e desde que saiu do SAS ou desde s e eu vou para docs é pessoas. Desde que eu disse entrar no CSS pré processadores, ele está me perguntando qual eu quero usar em sua bunda ou isso Ou você diz que você pode ter algo arquivos de conflito para cada uma das criaturas que instalou, ou podemos ter todos eles em um pacote. Descubro que vou ter umas calças fantásticas. Tudo bem, então o que o CLI fez por nós é criativo. Você projeta aqui instrumento bm divertido yon. Então, estou a receber a sua resposta. Então, se você está usando NBN, você vai obter quantidades NPM de Então nós vamos para o projeto artista. Eu sou jovem. Então, se você está se perguntando o que é a sua união é muito semelhante ao B M. Então é como uma versão muito mais eficiente do NPM. Tudo bem se você não tiver. Então a diferença é que o NPM agendar coisas e completar alguém depois do outro. Mas como John faz ou batedor Lee fazendo muito mais rápido. Então digitando o seu em servir, lançamos um sóbrio local como o que lançamos nas palestras anteriores. Então, nosso Severus local todo hétero anfitrião local 80 80. Então isso é o que você vê quando você configura seu primeiro aplicativo bonito. Há mais agradável para baixar aqui e dizer que é completamente você apenas ab em links para documentação Babel cli documentação, links essenciais para a comunidade. Chad para retornar o ecossistema de notícias nas constantes, podemos ver que você está fora de nós, que discutimos apenas de vocês tartarugas, que discutimos no anterior como Trump. Ok, então vamos ver que tipo de arquivo dentro do seu projeto. Então, para isso, posso fazer o ponto espacial, é uma extensão para a escolta, então escoltamos. Se você não sabe o cabo de estúdio visual. É uma pequena moeda. Eu estou usando a escolta você pode usar Sublime ou Adam ou qualquer coisa está bem, então, mas se você estiver usando a escolta, você precisa ir para extensões em instalar um dos plugging me para marcar menos. Beaudo. Então, se você fez é como um suporte de visão para o Tribunal dos EUA. EUA É por isso que comprar a vista pelo enviado Ghous Quando você vem aos arquivos, você pode ver que temos muito menos arquivos e o que normalmente temos o Senhor mais doenças são dadas em público. Temos o índice dot html e em vez do próximo HTML, temos o abdômen. Então, como discutimos no trabalho anterior, não temos abdômen. Então este é um dia que estaria trabalhando com na exportação entusiasmadamente. Desistir. A maioria das lutas importantes existem, então temos nossos principais Dodgers. Então, em vez de você, é um pouco diferente, certo? Renderizar uma quantidade nos vídeos anteriores o que discutimos. Waas, na instância vista, vamos dar um elemento direito no elemento. Vamos especificar se é de primeira classe ou se não estava pronto. Mas aqui temos Riendeau e temos por perto. A razão é que ele está tornando um instrutor componente e treinador Dave. Está enviando a renderização competente. Se você pode ver aqui importando vista como um plug in, quero dizer visualizadores uma biblioteca, e também estamos importando ver aplicativo como um componente. Então, essas portas veem ventiladores são chamados de seus componentes. Então, em termos de você tão principalmente na frente e DreamWorks, como os desenvolvedores lidam com as coisas é que lidamos com eles incompetência. Assim, por exemplo, um site tem uma cabeça de corpo e cabeçalho de foto é um órgão competente, um competente e pé é um componente. Então o que acontece é que quando você tem este cabeçalho e rodapé como uma conferência separada, em vez de ter que ler o tribunal de idéias extensivamente, você pode apenas dizer para usar a conferência já existente. Então, aqui o componente inter está realmente montando o componente para o próximo HTML para que competente é a raiz competente para toda a atividade foi aconteceria sua aplicação. Então, dentro deste competente, você pode ver que temos outros componentes, estávamos importando conferência, e estamos ditando-os. Então vamos com esta porta. Poucos arquivo, na verdade Um tão adulto que você arquivo consiste em três partes. Ele pode auto template. Ele pode servir um script que pode sustentar. Então isso é o que torna a porta poucos arquivos muito mais fácil de trabalhar com. Então temos todo o template ing scripting e styling em um só lugar para um único componente. Geralmente, quando você trabalha, encontre raiva. Cada conforto tem várias lutas, certo? Assim, cada ângulo competente tem quatro frascos html CSS tipos Revenge Oscar. Mas aqui temos todos os três meses. Isso pode não ver muita vantagem que agora, por isso foram ampliando seu projeto está ficando maior e sua conferência que aumentar o número, vai ser muito mais fácil de manter. Então a primeira coisa, o modelo Então o modelo temos o diabo disparar o aplicativo dentro do dia Nós temos uma imagem. Eles podem apenas o logotipo que você pode ver aqui sob que temos este componente personalizado Olá, Word com a mensagem. Bem-vindo ao “Just acontecer”, então eu posso mudar a mensagem e eu posso ver gênio instantâneo. Então este mundo Olá é um componente personalizado nesta mensagem é chamado é um problema. Discutiremos mais do que o líder dos adereços. Então, para usar um costume competente, você tem dois passos. primeiro passo é importante Custom competente importação Olá mundo de barra competente. Olá mundo socom pai barra l uma palavra executar tão dentro da seção padrão de exportação em um componentes secos em Olá palavra. Então uma coisa, como discutimos com vista mais algo vai ser estruturalmente agora formato de objeto. Então, mesmo quando você tem uma data de propriedade, você precisa tê-lo em formato de objeto. Da mesma forma, se você tem os componentes, você precisa ter a conferência deles como um objeto e dentro da confiança que você vai declarar água a conferência que você deseja usar. Então, no nosso caso, Olá foram então você pode usar o confiante. Então, se eu apenas comentou, você pode ver quanto dos dados foram realmente desse componente para que possamos ir para o inferno Overlord poucos, e podemos ver isso. Então tudo o que está aqui está sendo processado em uma revisão de rabdo. Assim, qualquer mudança em tornar o Hollywood competente automaticamente se reflete no aplicativo que você é competente e automaticamente é afetado. O estilo de praia principal é CSS. Não há nada de especial nisso, então você pode usar com sua linguagem um conforto, mas eu nem estou no roteiro. Você pode usar o script com a Companhia Charles. Você pode escrever com texto datilografado? Então estes são tipo de como o principal achado mudando você para saber antes de iniciar seu projeto. Conheço o pacote deste ano ou o Jason. Ele consiste em todos os scripts e todas as dependências que você está usando. No nosso caso, estamos usando o modo de exibição. Então é isso para este vídeo. No próximo vídeo, discutiremos, como prometido, a bordo da conferência e métodos dentro do nosso novo projeto de visão. E também vamos olhar para casos de uso como usar conferência e como usar métodos . Assim, a maioria dos futuros desenvolvedores têm, ah, um pouco de confusão quando usar as propriedades do computador e passou a usar métodos. Então vamos olhar para isso com mais alguns exemplos, você possa entender que eu iria contextualizar para usar este tipo de propriedades semelhantes. 6. 06. Métodos: Então, hoje aprendemos sobre métodos e propriedades do computador. Antes de entrarmos na minha circunferência da cabeça, só quero instalar uma pequena biblioteca. Esqueleto Corliss. Tão habilidoso em é uma biblioteca CSS semelhante ao bootstrap, mas habilidoso. É muito, muito leve e geralmente faz um projeto parecer muito mais agradável. Então aqui temos nosso projeto de teste sobre isso é como ele parece. Então ainda podemos ver esqueleto copiando a versão unificada. Então, instalando assustado, não ter certeza de que você está instalando-os versão unificada dele porque nós não vamos estar usando habilidoso em uma escala enorme e usar um esqueleto é muito, muito baixo. Então não precisamos do CSS esqueleto completo para que possamos pegar o CSS em Gordon extorquir html no projeto view, que foi configurado no último vídeo. Então, dentro do próximo HTML, Eu posso criar um novo link que eu veria avaliar, Eu estou dentro da cabeça Chef Aiken baseado o elo esqueleto. Assim que eles baterem em salvar, você pode ver que meu projeto é atualizado e, portanto, ele foi alterado. Então, com essa configuração, podemos ir de dentro para fora boa vista sobre, Podemos comentar a imagem e os componentes Olá mundo. Devíamos ter uma pista em branco. Então aqui, as liberdades da medicina parecem precisar, certo? Então, uma coisa que você pode lembrar é que, instalando o modo de exibição nos projetos anteriores antes da exibição, cli usou dados como um objeto. Direto quando você está usando propriedades de dados dentro realmente visualizar projeto. O que acontece é que a propriedade de dados é exclusiva para cada componente. Assim, cada um e cada competente precisa ter sua própria propriedade de dados. Então, se você usar a propriedade detonador como um objeto, ela é compartilhada entre todos os componentes. Portanto, evitar que essa visão não nos permite usar dados como um objeto. Então, se você pode ver que tivemos a carta de concerto que diz opção de data deve ser uma função que retorna valor de instância separado nas definições competentes para que possamos fazer isso. Mas mudar o líder na função que você é Dunn é um objeto, e dentro do assunto podemos ter as propriedades do leitor. Portanto, este caso não se aplica a propriedades como componentes ou métodos, porque o problema essas propriedades só são chamadas quando o com impressiona Kristen. Então, até lá, eles não precisam ser únicos para cada componente. Então, com isso dito, podemos limpar propriedades dramáticas Métodos novamente é um objeto. E dentro deste material, podemos ter um JavaScript funções tanto que não há nada além de funções javascript. E se você não sabe o que funções javascript, coração faz boas funções tinha usado para exalar um conjunto de ações. Então, por exemplo, podemos ver o nome completo Então nós criamos uma nova função javascript ou importado no nome completo. Não podemos retornar para que este nome completo importado devolva uma corda com um maiô. Krishna. Então, como é que vamos aceder a isto? Mentoriado para que você possa acessar Isso importava muito semelhante às propriedades de dados tem você pode ter um saco grande. E dentro disso e dentro da dívida P temos meu nome é uma interpolação e interpolação inserida . Assim como acessamos suas propriedades de dados. Podemos acessar o nome completo. E já que é uma questão, precisamos ter os suportes. Se você diz isso, meu nome é um tradicional. Vamos apenas torná-lo muito maior. E onde ele está agora, você pode usar uma história. Eu sei que é culpa. Eu para que meus filhos possam fazer muito por isso. Por exemplo, nas propriedades de dados, podemos ter duas variáveis ou duas propriedades de dados que diz disponível A que tem um valor off 20 onde eles estarão, que é um valor de 10. E dentro deste assunto podemos devolver a parte disto aos vegetais. Então, quando você está trabalhando com JavaScript e quando você tem que objetos de valor e você não retorna a parte dessas duas variáveis, você pode ter isso atendido. O nome dela é a minha resposta. Você considera isso feito mídia, mas um e não stud variável B, certo? Então não, por descidas, você pode mudar pode aplicar aqui também. Então, se você vê-lo, o produto é multiplicar para que este multi jogo será multiplicado disponível em e onde eles serão . Então vamos ver o que conseguimos. Se eu vir, recebo um novo. É muito habilidade não é definido. Então por que estamos pegando o centro? Claramente temos muito Billy aqui. A razão é que a visão pode ou distinguir entre variáveis locais. Foram estas as propriedades de detalhe? Permitam-me que dê um exemplo. Nenhum desmantelado funcionará se for preciso. Variáveis locais, nenhuma vaga a parte é 200. A razão é quando você está retornando variável na forma como eles serão ele está procurando essas variáveis dentro deste método dentro do metal multiplicar. Então, quando no caso anterior, quando essas duas variáveis estavam faltando espanado com através outro que ele não encontrar disponível oito ou o variavelmente não está definido agora para acessar as propriedades de dados em vez de confiante, você só precisa para dizer vista que iria acessar a propriedade data fora deste componente para que eu possa usar o descoberto. Mas você disse que este começo muito cedo neste seus pés será então o que este guardião faz é referências que a vista precisa para obter o vídeo da propriedade com um a partir da data da propriedade fora deste componente mordomo e semelhante para o bebê será de a propriedade data deste componente. Então nós salvamos isso os valores novamente 200 quando eu atualizar o valor de 200 Então esses métodos também podem aceitar argumentos. Por exemplo, se eu quiser enviar, então o que eu quero fazer é que eu vou receber sob disponível pode aplicar para ele em eu quero multiplicar variavelmente variável estar nesta nova variável multiplicar com qual foi passado para um argumento . Então, o que posso fazer é quando digo no reboque, uma estrela, Mike Leavitt. Desde o meu mergulho Levitt é uma variável local. Nós não precisamos usar isso quando nós se você usá-lo para procurar a variável dentro das propriedades de dados. Então, quando ele engana, a parte é 400. Muito bem, deixa-me mostrar-te uma vista fantástica. Propriedade. É chamado de seu V imortal. Digamos que temos um nome para a propriedade. Tudo bem. A propriedade da entrada é e o número para multiplicar. Então o que eu estou fazendo é que eu quero que isso seja variável, para ser dinâmico. Então criamos uma nova propriedade de dados que diz dinâmica, legível. Tudo bem, então no multi jogo, vamos enviar a dinâmica. Assim como discutimos nas palestras anteriores, que, se você tiver envolvido os links estão abaixo, o modelo está vinculado ao script. Portanto, a diferença de valor nas propriedades de dados são as propriedades intermediárias dentro do modelo. Você não precisa disso. Então dentro da minha implantação, er eu estou passando em uma variável dinâmica dinâmica. Esta variável dinâmica é passada através do argumento em e aqui também podemos renomeá-lo como variável dinâmica aqui também meio dinâmico ou para uma melhor compreensão. Podemos apenas ver que tem variável dinâmica local e isso é global e eu sou um direito ganancioso. Ok, então sei o que eu quero é que quando o Então o que eu quero é que qualquer que seja o valor ou qualquer que seja o número que o interesse do usuário dentro deste imposto de entrada eu queria ser atribuído à variável dinâmica global Então view é reactivo por natureza. Então o que significa é que sempre que o valor da variável dinâmica global muda, a função de multiplicação é re executado, que significa que toda essa coisa é calculadora re. Eu sou o lugar onde as partes exibidas os valores exibidos também é atualizado novamente automaticamente. Então, uma maneira que podemos comprar na entrada do usuário para esta variável chamada s dinâmica global é usando a manhã em vez, seu mortal pode colocar o dobro global que eu faço variável em. E se eu quiser, podemos mudar para número. Tudo bem, então o que eu fiz é que sobre o quão ligado este componente de entrada variável dinâmica global . Então, este ouvinte de eventos de acesso mortal. Assim, sempre que o valor dentro do componente de entrada muda ou dentro do elemento de entrada muda, ele atribui o valor para a dinâmica previsível de dados. Variável em Sempre que a dinâmica global, variável valor adolescentes isso pode desenvolver esta função multiplicar vai ser executado . Eu sou o Steve que eu faço, vai me levantar mais tarde, então vamos ver. Então aqui eu tenho uma entrada que, e ele está me pedindo para digitar o número. Então, se eu entrar para você pode ver que nós nem mesmo precisamos atualizar a visualização da página. Automatizado entre são os valores correspondentes a essa variável, e você pode se divertir com ela. O que quer que você entrar é instantâneo, foi feito. Então estes são métodos água, computador, propriedades. Então, para entender as propriedades do computador, vamos dar outro exemplo. Digamos que eu queira captar simplesmente interesse. Tenho que calcular juros simples. Eu precisaria de três variáveis diferentes. Eu vou precisar do diretor apenas os juros, e eu precisaria de um ataque. Vamos criar essas três propriedades de dados agora, eu me pergunto Galeria no interesse simples. Então, a forma como garantimos o simplesmente justo é que temos uma fórmula, certo? Então eu usei a interpolação e disse em posição. Eu também posso executar várias operações, então instrua multiplicar aqui. Eu também posso que ele leve. Mas a partir desta operação variavelmente realmente será no reboque. O enema global, credível no resultado ainda será o mesmo. Então, em vez de simplesmente interesse, o que podemos fazer é ver o principal em interesse duplicado por 100. Então, a partir de agora, o simples zero interessado porque a taxa de juros principal em zero. Assim, podemos limpar mais três variáveis de entrada que estão ligados interesse princípio sobre grandes propriedades de dados. Então tivemos três variáveis de entrada diferentes que estão vinculadas com interesse principal. De fato. Então, sempre que uma dessas muito inovadoras era mudanças, o simples valor de interesse também, Tina está tão doente que você não. Tudo bem, então agora que isso está funcionando e, por exemplo, digamos que este bastão implantado não estava morto, certo? Então muito novo desenvolvedor entra e está tentando entender seu tribunal. Ele não entenderá o que essa fórmula significa. Ou se o primeiro for longo demais, será muito difícil para eles. Será muito difícil para você ou para o novo livro Della para depurá-lo, então insira propriedades do computador, que as propriedades do computador sejam muito semelhantes às propriedades posteriores. Então, uma coisa que você precisa entender é que as propriedades do computador também têm este índice muitas vezes objeto parecem metros e componentes. Então, em vez disso, as propriedades do computador podemos ter propriedades que veem, mas são simples e vestidas, então as propriedades do computador que gosto de chamá-las como propriedades avançadas de dados . Portanto, estas são basicamente propriedades de dados com muito mais funções. Você está fazendo 100 em Se quisermos, podemos ter tudo isso na parte de trás também, para que possamos usar este retorno. Propriedade da empresa de interesse simples assim como você. Vamos usar uma propriedade de dados normal. Nós não precisamos alternar para quaisquer colchetes para isso porque é uma propriedade de computador. Então temos estado. Voltamos. É a mesma coisa, certo? Então, usando as propriedades do computador, seu modelo parece muito mais limpo se algum novo desenvolvedor por perto, ele ou ela pode entender o que você está tentando fazer muito mais facilmente 7. 07. Bônus - Propriedades de método de Vs computado: Ei, pessoal, isso é um sermão bônus. Então a razão pela qual estamos fazendo isso é para que a maioria de vocês tenha alguma confusão entre as propriedades do metal e as propriedades do computador. Você sabe, quando usar o que em e também uma das perguntas tem sido recebendo é por que não podemos usar métodos para suas propriedades para computador também? Ou por que não pode usar o computador de em termos, bem como para a diferença exata entre esta história? Então vamos olhar para isso nesta palestra. Então o que fazemos é que temos esta visão de senhor da casa componente em você criar propriedade mentorada que diz retornou nome completo em que vira. Certo, antes que possamos ter feito qualquer coisa. Ele também tem nossa propriedade de dados dentro da propriedade de dados. Vamos salvar seu nome completo e temos um sobrenome desmantelado. O que ele faz é retorna distorcer o primeiro nome, colocar o sobrenome inicial, certo? Então ele também tem computado Roberty. Então, esta propriedade da empresa, digamos, retorna a idade, certo? Foi uma polegada. Também comeu uma propriedade que diz a idade. Sou considerado feito para começar a idade, então o que podemos fazer é ter que ir para propriedades três s lugar segurar. Eu sou um combinado com o primeiro nome e sobrenome. Também tem em sua propriedade. Isso é osso fazer a idade. Tudo bem, então a água quer é vamos ter uma conversa de ódio dentro de nós. Conceba, meu nome está aqui. Vamos usar um metal, certo? Nome completo. E também tem um saco de direção. E aqui podemos ver você envelhecendo as pessoas. Tudo bem, então pode salvá-lo. Eu sei que posso mergulhar meu nome. Eu também posso entrar na minha idade. Quão tarde assim para isso de acordo também com este e neste momento espaço apenas para como as pessoas possuem. Então, também vamos considerar olhar para descobrir muitos a cada mês que está sendo chamado. E quando cada propriedade de computador está sendo chamada de propriedade de computador tem tribunal de feijão. Ok, então comece como este concerto de luas estaduais é um barco. Ele fez assim no início, Retorno e propriedade da empresa foi chamado. Ok, então e agora? Estou a fazer o meu nome. Estou conseguindo que a propriedade de metal foi pega. Parece justo, certo? Então estou lidando com algo usando o método. Assim, as propriedades dentro dos métodos estão mudando. Então a propriedade metálica está sendo chamada em aviso prévio. Como, embora propriedade de computador não está sendo chamado porque nós não estamos fazendo nada com a idade ainda, então nós também vamos inserir meu sobrenome perguntou. Então temos que a propriedade de metal foi chamada por 13 vezes. Agora. A diferença é notar que ao chamar propriedades admitidas, não estamos usando as propriedades do computador. Mas se eu dividir em, se eu estou entrando na minha idade, você pode ver propriedades do método também sendo gored junto com a propriedade do computador. Então a razão pela qual eu omiti propriedades também sendo executadas é tão como discutimos anteriormente . Você usa algo chamado “É Sobre Seu Cão “, certo? Então o que acontece é que sempre que a sala virtual atualiza, Ver também atualiza as propriedades de metal. Então o que acontece é que um lister ficou requer quaisquer alterações. O competente Robert. Não será chamado, mas para métodos enquanto o sistema mundial está operando enfraquecido, emitido para ser chamado uma e outra vez. Portanto, geralmente é uma boa prática usar propriedades de computador que método propriedades, portanto, torne seu aplicativo muito mais eficiente. Então, esse é um exemplo para esclarecer a diferença entre propriedades mentais e propriedades concluídas sobre por que você precisa usar em muito você precisa usar propriedades comprometidas e talvez você precise usar remédios computados, então eu espero que essa habilidade. Então é isso para este. Vou ver o próximo. 8. 08. ligação de dados: então talvez olhar para a mineração de dados. Então, o que é mineração de dados e como usá-lo em vista? E também ir para alguns exemplos para obter muito mais compreensão do conceito? A primeira coisa que vamos falar sobre isso é moral. Tudo bem. Assim, a moral é também uma espécie de atributo de ligação de dados que usar em sua palestra anterior . Mas a moral é usada principalmente para uma mineração de dados. Então vamos começar uma mineração de dados e apenas cobrindo tudo. Tudo isso veio para o tribunal anterior para fora. Mas eu gerencio cada palestra em um ramo separado para que você possa ir para um ramo específico e você pode acessar o núcleo dessa palestra. Tudo o que vamos ver, eu tenho um cão qualquer. E isso aponta para o meu site no meu site. Lingus torná-lo Gordon. Então, se eu for aqui e clicar nele, vou ao meu site. Mas e se eu avisasse isso para vir de uma propriedade de dados? E se eu quiser que isto seja dinâmico, certo? Então, o que? Perdemos? Vamos criar um objeto de data. Sabe, dados tem que ser uma função dentro do Dedeaux. Vamos criar um objeto dentro disso. Então, e se eu quiser que esta propriedade de dados seja vinculativa com este ataque? Agora eu quero que esta propriedade de dados seja o link que este ataque aponta para o pé. Então, anteriormente, nós exibimos as propriedades de dados dentro de seus modelos de tabela usando o método de interpolação. Certo? Então, podemos fazer em preparação neste caso? Vamos ver o que acontece se eu fizer. Esta visão vai dar outra. Diz que todos os intemperados combinados... a razão é que isto não é Syntex dividido. Não é grande não comprar propriedades de dados Dois atributos assim. Agora, se você quiser vincular nossa propriedade dinâmica de propriedade autoritativa a um antídoto como chefe de cozinha, o que temos que fazer é realmente ver que nos ligamos. SME não podia. Agora isso se torna nossa propriedade inimiga agora dentro deste enfraquecimento ligá-lo. Fazer qualquer uma das nossas propriedades de dados, por exemplo, link do site Não receber ID lá ele se foi. E se eu persistir, ele vai para o meu site. Não, a parte incrível disso é o que é. Sim. Não, a parte incrível disso é que posso escrever qualquer coisa aqui de novo. Vá para Yeogu não foi e eu vou passar pelo Google Dot com Então mais uma bebida precisa. O que podemos fazer é remover isto aqui em cima. Você pode ter qualquer entrada. - Pai. Você pode vê-lo no site da manhã link dentro deste lugar e Internet de lado positivo que você está. Então o que acontece é que eu tinha este imposto de entrada e qualquer que seja o que você está digitando, ele vai ser automaticamente vinculado a este ataque em particular. Então, a partir de não, você pode ver que o ataque está apontando para o host local 80 tempo. Agora, não venha e ele mostra google dot com. Então, agora, se eu quiser ir para o Senhor para casa, eu preciso de peito Seja Sim. Ok, isso significa para eles com o dot google dot com tão simples, que se torna o meu site. Tudo bem, então é assim que você pode vincular dados, propriedades , atributos diferentes. Agora podemos fazer coisas muito mais interessantes do que apenas criar um link dinâmico. O que também podemos fazer é criar uma classe dinâmica, certo? Vamos tirá-lo, por exemplo, iria começar para nós. Temos uma etiqueta de quatro que diz que sou um título. Certo? Então, para isso, temos uma classe que tem gosto ativo. Então, em vez de script, podemos ver ativo significa mau escoamento como azul. Então nós temos um saco de direção e seus empréstimos ruins como azul. Então, e se eu quiser tornar o plano de fundo dinâmico ou eu quiser ligar e desligar o plano de fundo. Eu queria a classe artista ativa sempre que eles quiserem e removê-lo de quando eles quiserem. Agora quero esta turma ativa, Toby Dynamic, certo? Eu queria ser condicionalmente ativo. O que? Eu queria ser condicionalmente não ativo. Então o que eu vou fazer é eu vou comprar para esta classe hoje a propriedade. Então o que podemos fazer é insanidade para se opor. Podemos criar um ativo ruim. Isso é dizer que eles diriam para que possamos fazer esta classe de colocação dinâmica mais uma vez ter a mente que ligamos . Abençoe Agora dentro dele, vamos criar objeto. Na primeira coisa vai ser o nome do vidro que está ativo. Eu sou a propriedade líder que deve ser um booleano com, digamos, se as aulas estão ativas ou não para nós. As propriedades do leitor, fundo ativo Então, o que isso significa? Então estamos fazendo a propriedade de classe dinâmica para este título, tornando a classe ativa, dito dedo do pé verdadeiro ou falso? Este ato sobre o seu incidente, uma propriedade que é um ouro, certo? Então, a partir de agora, que é uma propriedade Acto fundo é também. Então, quando eu bater em salvar, não haverá nenhuma diferença. Mas quando uma mudança é fundo ativo para quedas, o fundo desaparece. Então, mais uma coisa interessante o que podemos fazer Uma mineração de dados é ter estilos dinâmicos, certo? Então, por exemplo, digamos que eu tenho um título que tem meu nome nele. Tudo bem, Soul, eu quero ficar para ser meio triste. Eu não falei. Tudo bem, daí se eu quiser que essa propriedade de cor seja dinâmica? Então, mais uma vez, o que podemos fazer é ficar cegos. Você se importa com isso? Então, um precisaria tomar. O que podemos fazer é instruir. Digitar seria comprar cada vez. Podemos colocar o Golan que também é igual no ser cego. Esta coisa deve estar dentro do aparelho. Então tínhamos a cor azul, certo? Então instrumento diretamente anexando explodiu. O que podemos fazer isso podemos ver que podemos criar uma propriedade de dados de cor personalizada. Então vamos para o nosso objeto de dados e dentro que criamos um novo núcleo de propriedade menos sistema que eu vou e como se não, nós o deixamos em branco. Então, em baixo, concluímos outro saco de entrada e que nós mortais poderíamos. Então, só para entender o que está acontecendo aqui, temos uma calamidade personalizada. A propriedade, direito assim discutido, propriedade invalidada pode reordenar ou seu valor pode ser alterado. Usando essa entrada valiosa e uma vez que um valor personalizado validar uma propriedade altera a cor da propriedade dentro do saco de ódio também muda porque ele está vinculado à propriedade de cor personalizada . Então, quando eu vou ao meu site, eu entro em gotejamento de nome. Consigo ver branco que o faz desaparecer. Consigo ver azul. Eu posso vê-lo morto dizer amarelo nossa aldeia. Então, o que está acontecendo é que sempre que o valor muda dentro da entrada bem, a propriedade de cor personalizada está sendo alterada na propriedade de cor personalizada está sendo alterada. Está sendo atribuído à propriedade de estilo de cor dentro. Vá em frente, vire para trás. Tudo bem, então é tudo para este. No próximo pouco estar olhando Toby moral e um pequeno exemplo entre uma maneira de mineração de dados para realmente a queima para que você possa entender o que está acontecendo, tudo bem. 9. 09. vinculação de dados de dois sentidos: Então, hoje nós olhamos para uma ligação de dados. Então nós já olhamos no reboque o mortal no passado. Então, neste eleito só vai repassar isso mais uma vez. E então também estamos olhando para a diferença entre mim e nós mortais. E quando você precisa usar o quê? Então eu acho que a maioria de vocês agora estaria se perguntando palavras diferença real entre essas duas propriedades, como as diretivas de armazenamento, nós mais do que ser vinculado. Então vamos começar a ter alguma clareza sobre isso para que você possa saber que eu fui usar o trabalho. Tudo bem, então no luxo anterior falou sobre encadernação de dados, certo? Então falamos sobre como V compra é usado para vincular variáveis para que você possa pensar re fronteira é usado para comprar o valor de uma propriedade de dados. Entrada dupla. Bem, então se eu tenho uma entrada para você e eu quero o valor fora dele e se eu quiser e eu quero que seu valor para ser lá é um correspondente a uma variável ou a uma propriedade de dados. Por que eu não costumava ser vinculado e valor? Vamos ver. Nome certo. Por que eles não fizeram isso? Eu convidei. Eu faço. Certo? Então, estas são duas diretivas diferentes, quase tendo o mesmo propósito Obtendo o nome da propriedade de dados para nascer com campo de entrada. Mas por que eu usei talvez mais até agora? Convidado e argumenta que talvez possamos. A questão é, compramos joelhos, um rádio definindo ou apenas aqui por mim. Mas como nós mortais para preparar a queima. Então agora temos que pagar taxas diferentes. Um está usando estar comprando e quando ele está usando a manhã. Então, em termos de e por e o que acontece é a propriedade de dados nasce com um valor fora do campo de entrada. Assim, eles nunca alteram a propriedade de dados, o valor e a alteração. Mas sempre que eu mudei, o valor que teria operacional não mudará. Por exemplo, se eu tentei sair, eu fiz um vídeo com ou sob os ditames de string. Você pode ver que mesmo que estes dois estejam vinculados à mesma propriedade de dados, este nome que está usando o V mortal não é atualizado. A razão é que só está desossada em uma semana. Portanto, o nome é apenas campo de entrada do limite, mas o valor dos campos de entrada não está vinculado ao nome. Mas, como de manhã, se qualquer uma das duas propriedades mudar, ambas são atualizadas. Então vamos tentar mudar o nome no V. Bine. Vamos ver se Knysna é mais assim. Se eu adicionar hífen, desenvolver sobre são os caracteres extras. Você pode ver que esse valor não muda. Mas se eu remover este achado se eu fizer isso, o valor superior acaba mudando, certo? Então a razão é, quando você está usando o mortal, o nome é ser um osso para esta infantaria, ou seja, se o valor mudar, ele se levanta para ir para o nome, ou mesmo se o nome mudar, ele é atualizado para o valor. Assim, a diretiva moral é usado quando você quer ler ligação de dados, enquanto um ser comprando narrativa é usado quando não havia apenas uma redefinição. Então eu espero que essa habilidade, uh, eu acho que este exemplo seria suficiente. Então é isso para esta palestra. Então, no próximo, nós olhamos para os eventos em duh. Quais são os diferentes tipos de eventos disponíveis? Nós apenas vamos para a interação dos eventos. Depois poderíamos nos concentrar nos eventos do teclado e na maioria dos eventos, exceto que vai ser muito divertido. Espero que você veja no próximo 10. 10. Events - introdução: Então hoje nós olhamos para eventos, então eventos de água e água, diferentes tipos de eventos na água, alguns dos eventos que podemos começar com. Então, antes de começarmos como de costume, o tribunal estará disponível no repositório git. Então, com isso dito, vamos começar. Então, um exemplo principal que podemos usar para eventos defendidos é o direito de Riverton. Então, botões. Se temos oportunidades rapidamente e você quer executar uma função quando o botão é clicado para que você saiba como e funções em você foram discutidos sobre isso para que possamos usar métodos que diz Coletar tem função I dentro disfunção, Começando esse Senhor agora. O que devo fazer para garantir que o clipe de metal seja executado sempre que o fardo é clicado? Então, para isso, podemos usar algo chamado seus eventos. Em Javascript simples, você faz algo como no Click, mas em enorme é o seu uso. Além clique, eu devo que ele mostra direito clicado. Então vamos. Não é editor usado para eventos, então nós no clique liga disfunção. Clique neste fardo, então sempre que o botão for clicado ou sempre que o clique do evento acontecer sobre este fardo, este assunto está certo, então vamos salvá-lo e seu ticket para fora. Clique em mim, clique. O botão foi clicado. Incrível. Tudo bem, agora podemos fazer muito mais do que apenas a primavera Outro Suponha que temos um condomínio de balcão. Eu sei que o que eu quero é que sempre que a maldade clicar, eu quero que o contador aumente. Então, sempre que dis clicou neste contador de início mais Andi, não clique em mim. O contador aumenta quando eu clicar com o botão direito do mouse no botão. Certo? Então agora, já que este lugar não contador, lugar é apenas uma única linha. Mas uma vez que este inclemente é apenas uma linha, ele não precisa de uma função especial para ele ou de um método específico para ele. É bom ter um método para todas essas propriedades porque quando alguém entra, eles sabem que além de boa função está acontecendo ou se você quiser fazer muito mais do que apenas aumentar o contador, você pode facilmente adicioná-lo. Mas só para mostrar que você também pode ser feito, nós podemos criar. Podemos remover o método Clegg daqui, e podemos apenas implementar o contador. Muito obrigado, muito fresco. Ainda é boxe, então, se for uma única operação, podemos fazer a partir daqui diretamente ou através de algo importante, certo? Um precisaria de uma coisa. O que podemos fazer é que também podemos usar duplo clique. Então, na tarefa de você tem no clique e no clique duplo direito de modo semelhante mu para usar duplo clique, precisamos dizer além que eu não gosto Então o que acontece é que nunca gostamos de DoubleClick, então você nos líderes valentes. Tudo bem, é isso para essa interação fora dos eventos. Na próxima palestra, analisamos diferentes tipos, eventos de entrada e o que podemos fazer. E mais uma vez, todo o tribunal também estará disponível para obter ajuda. Então é isso. Vamos ver no próximo. 11. 11. Eventos de teclado: tudo bem nesta palestra vai ter alguns eventos interessantes. Então, a imagem anterior que vivemos no clique e ou clique duas vezes direito sobre. Nós também aprendemos quais eventos são assim nesta palestra vai olhar para eventos de entrada sobre quais são diferentes tipos de eventos de entrada disponíveis. Tudo bem, então vamos começar. Existem vários tipos de entrada. Os eventos vão sair de você, e vamos para a nossa idade com um certo exemplo. Então você pode entender como usá-lo em termos de projeto de reeleição. Ou como você sabe? Ele estava no sentido prático no primeiro ano em que vamos cobrir seu próprio sangue. Então suponha que você tem um evento de entrada, então eu só quero que você saiba que todo o seu exato eu apenas gosto em que evento tem um espaço reservado no nome e o que eles não vão fazer identificar a partir deste evento é que sempre que o usuário clica fora esta entrada Field, estar no sangue, exalado com ela, então vamos ao método. Bem, diga sangue, e eu vou deixar o usuário clicar fora para ir sobre o campo de entrada. Tudo bem, então o que acontece é que sempre que eu me concentrar nesta entrada livremente e eu digito algo. Está tudo bem, certo? Então, sempre que eu clico para fora, se ele e alerta aparece dizendo que eu chutei fora do campo. Então nosso Miller é usado para isso. Então, um truque da manhã que você precisa entender é em vez de digitar além, podemos apenas ver adicionado de forma semelhante, segure como usamos boliche para o bine B. Podemos usar essa data para além. O próximo é sangue semelhante do dedo do pé que se concentra sem pontuação. Podemos dizê-lo. Concentre-se. Você tem foco. Alguns acreditam que eu aposto nisso como pegando Millard. Você se concentrou. A ortografia está em frente. Desculpe-me por isso. Assim, da mesma forma, o que também podemos fazer é limpar a forma que podemos colocar essas duas variáveis de entrada dentro dela. Eu sei que podemos ter qualquer lugar Evento tal que em Submeter direito. O que acontece quando o usuário clica enviar para que possamos vê-lo alguns seios grandes assim dentro desta maturidade pode dizer enviar. Então, para enviar, podemos ter um botão em se tipo enviar em. Não clique no botão. É uma submissão pressionada. Eu sou tão uma coisa que começaria a notar. Aqui está quando o assunto é pressionado. Estamos sendo feitos submarinos. Eu ou o que está acontecendo também é que o pH é recarregado. E daí se não quisermos que isso aconteça? E se eu quiser? Você sabe, nós retornamos o valor do nome, por exemplo. Podemos, introduzindo a moral eu posso dizer Nome sobre o que se, enquanto pressionando submeter. Quero câncer no dedo do pé. Nome do registro. Tudo bem, para que eu possa terminar o nome. Se isis enviar primeiro receberá o alerta para você, então o funcionário básico não será capaz de ver a mensagem de log do console porque é para mim . É muito rápido. E se você não quiser isso? Então, o que podemos fazer? Há algo chamado não é mais defesa? Então estes são os eventos básicos disponíveis para JavaScript, e você poderia mortificado que o muito mercantilizado é usando o ponto depois porta, mas evento. Então o que acontece é que impede o comportamento padrão do sujeito alguma proteção. Assim, para a subprodução, o comportamento padrão é recarregar a página ou enviar o formulário direito para enviar o formulário. E rasgou a página certa. Então aqui, se eu ver meu nome de novo. Eu digo Summit. Estou recebendo meu nome no consular. Ele não recarrega mais. Este carro menos ainda mais acusado. Há também outro efeito ainda mais que os da Carla. Então, o anterior que discutimos sua filha prevenir, que impede o comportamento padrão, enquanto iniciantes certificar-se de que o evento é feito apenas uma vez. Por exemplo, temos um botão que diz Flicked me em um clique. Temos algo para os testes. Cargas clique. Ótimo para que eu possa ter isso importado e contra um senhor consular, mas completo. Então, geralmente se eu não mencionar mesmo modificador, o que vai acontecer é o número de vezes que eu clicar no botão o mesmo número de vezes que eu vou receber a mensagem do consulado. Mas uma vez eu adicionei ainda mais desafiadores pontos. E se eu refrescá-lo, quero dizer, eu sou incapaz de participar em uma segunda vez. Então, uma vez afligido, ele corre. E é isso. Tão ruim. Bons eventos de entrada. Outra, não é? Acho que talvez saibas o que faz isto. Então, quando eu vou para a entrada, realmente quero dizer, eu pressionar uma tecla. Estou nas chaves para baixo. Eu entendi a mensagem. Assim, da mesma forma, temos outras propriedades se unem. Key Up Way vai usar o mesmo assunto, mas vai dizer chaves para cima. E se eu disser a diferença entre a chave do aluguel e os inquilinos, a tecla não funciona quando a tecla A é pressionada, certo? Mas enquanto a chave para cima funciona quando a chave é liberada, é isso. As chaves não se levantam. Teclas não deixa para cima, então há também um Mais são necessários significados que é apenas pressionado para que possamos entender sempre que as teclas peito mantendo-nos para que nunca digitamos nada. Ele é automaticamente cancelado registrado. Então é isso para os eventos de entrada e ainda mais diversificado. Então, para o próximo, literalmente olhando eventos do dedo do pé do mouse. Então, quaisquer amigos foram capturados com o Mo, e nós vamos ter alguns exemplos para isso, então eu vou ver no próximo 12. 12. Eventos de mouse.: Olá e bem-vindos de volta a isto. Gosto de estar olhando eventos de Tomas Na seção anterior, nós olhamos para eventos de água e água, até mesmo modificadores e ordem. Os diferentes tipos de eventos que temos disponíveis. E nós também não, você sabe, às vezes fora em bonito Vince. Certo. Então, nesta palestra, analisamos os eventos do mouse em ordem, diferentes tipos da maioria dos eventos. Então vai haver um bem curto, porque não foram feitos, suponho. Eventos. Então vamos apenas com eles muito rapidamente porque já cobrimos os conceitos básicos de eventos, por isso não deve demorar muito mais tempo. Certo? Tudo bem, vamos começar. Então, para o prêmio de iniciantes dentro de casa, o som disso está criando nossa classe David up de mais em seu tem. E nós só temos algum esconderijo, e nós fazemos isso vai dar finalmente pixels fora de altura e parece disparado por causa disso. Só quero entender que onde está, podemos dar um pouco de cor a ele. Uh, nós vamos dar-lhe luz. De acordo com isso, deve ser multado. Então, se eu salvar, deve ver alguma coisa. Está bem. Tudo bem. Então, Então, não é a noite do Mo. Conserte isso. Agora temos o Dave com quem podemos trabalhar. Então agora queremos olhar para alguns a maioria dos eventos de modo que, porque sempre que ele se perguntou, são testar um evento que você pode ir comigo ou você condená-lo a ir com adicionado direito para que você possa acessar a maioria dos eventos digitando em Mao de. E estes são todos os eventos que você pode acessar. Então, primeiro, quando olhamos para o seu mais Monsanto, Então o que acontece é que uma manhã faz sempre que o mais entrou isso fez ou é todas as ordens mergulhar para que o bebê possa ativá-lo é associando-o com o método. A maioria de vocês sabe que criamos o maior número de eventos dentro. Eu não fiz o lado do roteiro. Vamos criar um objeto de metal no assentamento do sujeito. Vamos criar um mercado consumidor mais uniforme. A maioria entra à direita, Então, se eu salvá-lo e se eu cavar o aditivo Mozilla, você pode ver que foi classificar Monsanto o log cônsul. Então, outro evento semelhante do mouse é a maioria deixar. Então não, o mais ao sul e vamos olhar para a maioria das férias. Faz exatamente o oposto de guerras acabarem tão alugadas Emo's. Ele não o aciona, mas nunca deixamos um Trickle disse. Então entrar e deixá-lo porque é certo para que Leavis de Mao sob o fazer é mais movimento. Então o que é mais comovido, como é enquanto a maldição que está se movendo dentro de seu Dave particular, ele vai continuar a imprimir o consulado. Então, se eu entrar, mas eu diria que a maioria dos movimentos. Se eu entrar e como um movimento o mais, você pode ver que meu registro de preocupação é ser campo dele mais. Então esse motorista considera minha mãe, se move sobre cada iniciativa de pixel. Outro é mais possuído, então um nome za sugere a maioria, então ele realmente acionado sempre que o clique do mouse conservador. Então, se eu entrar, eu clique mais clicado direito? Isso é chamado a maioria para baixo, então acionado sempre que as casas para baixo. Eu sei semelhante à digitação, coloca a tecla tecla para baixo e tecla para cima. Você também pode fazer os movimentos para cima, clicar nele e vivê-lo move-se para cima, certo, então é isso. Isso é um pequeno elétron muçulmanos. Então eu te vejo na próxima foto 13. 13. Observar Propriedades: Bem-vindo a outra palestra nesta palestra olhando as propriedades do relógio do dedo do pé. Mas antes de ir mais longe na maior palestra, maioria dos eventos e fez algumas mudanças no tribunal e ter aptidão-los e obter ajuda. Então, o que? Essencialmente o que as equipes têm feito é absolutamente o maior número de eventos em seu próprio indivíduo ao vivo , e eu apenas tipo deles individualmente e cada um deles tem dado a eles seus próprios métodos. Tudo bem, então, por exemplo, há os movimentos para cima. Esta é a maioria para baixo. Esta é Muzenda. Andi deve ser a maior parte da licença. Anderson é o maior movimento. Então, em vez de tê-los todos em um mergulho para sua clareza e compreensão, eu apenas dividi-los em diferentes métodos. Vidas em vez disso atira Stylings, certo? Então, tudo bem, temos um modelo limpo. Então, basicamente, propriedades de relógio de água. Então, a fim de entender as propriedades das palavras, você pode imaginar como ouvintes de imagem. Então, digamos que você tem uma propriedade de dados certa, e você quer ouvir ou assistir. As alterações têm de acontecer à propriedade data. Você pode usar prêmios. Propriedades de observação seria muito mais são úteis para meditações quando você pode avaliar a viabilidade dos dados em tempo real. Então vamos ter um exemplo para que possamos entender muito mais melhor. Então o que vamos fazer é criar uma pequena forma. Dentro deste formulário, você pode ter duas variáveis de entrada. Isso é um espaço reservado, tudo bem. Supostamente, a cidade é um formulário de inscrição I para o uso do estudante Justo. O uso deles deve ter mais de 10 caracteres na senha deve ser superior a oito . Guidant está bem. Então, um dia, o que poderíamos fazer é ter que dar um palpite. Tudo bem, então essas mensagens, eu posso mostrar-lhes bem ao lado de árvores moribundas. Então, a razão pela qual eu estou colocando essas mensagens corretamente disse campos de entrada é que eu só quero saber quantos caracteres que restam, certo? Então normalmente seria até senha. Faltam oito horas. Então, se eu salvá-lo, podemos ver usar o nome tem 10 carro apenas deixado no passado. O que sobrou isso? Eu sinto muito. Precisamos de mais duas variáveis para armazenar a entrada. Então diga, use o nome. Tudo bem, senha. E nós compramos rapidamente para esses campos de entrada usando a moral, e este é a senha, certo? Portanto, qualquer que seja a água que se estendeu em colocar nesses campos será armazenado automaticamente para o nome de usuário e senha. Então agora eu quero mais para essas duas propriedades de dados. Ou, você sabe, agora eu quero assistir essas duas propriedades de dados para entender o tamanho deles e para ter certeza de que eles são, por favor 10 caracteres de comprimento ter certeza de que eles são, ou se é senha. Tem oito caracteres. Então o que posso fazer é criar outra propriedade. Observem os cantos. Ele também segue a sintaxe de um objeto para premia propriedades que eu possa usar diretamente os dados Propriedades admitiu. Certo? Então vamos dizer que eu tenho usá-los direito. Eu digo para usar o nome e dizer que é um assunto. Então, o que este índice essencialmente faz é que esta propriedade de dados está sendo vigiada. É uma espécie de como anexar um evento é não fazer direito disponível, Então dentro usar o nome, por exemplo. O que vamos fazer é consolado ou registrar esta história usando ela. Assim, sempre que a propriedade data usar, o nome está sendo alterado. A propriedade do relógio, O que é a propriedade de dados em? Sempre que algo o muda, nossas forças ou isso aciona esse método, certo? Então, por exemplo, se abrirmos o registro do console e se eu estiver digitando algo, você pode ver o tipo que está sendo todo Coloque no show. Parece tão afastado, Bank. Tudo bem, então o que podemos fazer é com a ajuda disso, já que usar o nome é uma string, não podemos colocar o comprimento dela. Então eu vou registrar o console. Então, se eu salvar e começar a digitar, posso ver que o comprimento dessa coisa começa a aparecer aqui. Então saiba o que podemos fazer é alcançar o efeito desejado para a espuma. Podemos vê-lo nesta loja usando uma mensagem igual, então menos esta loja para usar o nome Bless esquerda. Então, tudo é macio usando na propriedade muda esta ninhada de gato país. Então eles vão para o nome de usuário é calculado e é subtraído de 10. E eu adicionei personagens de poeira sobrando. E este é ele na propriedade data usada em uma mensagem. Então, se eu salvar e eles saírem assim, enquanto estou digitando, você pode ver que o número de caracteres restantes diminui. Então eu posso apenas um pequeno espaço aqui, se eu puder. Sim, então agora ele está indo para Ford significa negativo, que significa que o comprimento do nome de usuário é muito maior que 10. Então, e se quisermos que seja restrito apenas a eles, possamos ter um pequeno cheque que diz, se for um nome, não emprestar é maior alerta Dunton. Então, se eu vê-lo isso e também o que nós também podemos fazê-lo. Nós também tivemos esta mensagem em por Save it e eu voltar Enquanto eu estou digitando, Eu ainda tenho quatro garantias restantes e se eu excedido, há um alerta, tudo bem, então você também pode fazer a mesma coisa com senha. Ou você também pode se certificar de que um ainda use o nome e a senha tenham correspondido à quantidade certa de termos. Você pode enviar o formulário automaticamente, ou que não seria que não seria realmente prático, mas você pode fazer muitas coisas mais legais, é? E você também pode tentar adicionar em eventos de entrada para este formulário como tipo de como criar muito mais intuitiva experiência toe para fazer o usuário entender, como o que está acontecendo. Então, a maioria dos sites tipo de usos, propriedades de relógio e marcas importadas para tipo de como um meio para validação de formulário de luva . Então, sempre que eles usam as saídas, sensação de entrada ou, você sabe no evento de entrada de sangue é usado pode afetar para entender o formato é certo ou violado enquanto eles estão digitando que eles podem descobrir se o comprimento é certo. Tudo isso, incluindo qualquer personagem especial. Então isso é tipo de coisa. Então isso é inferido. Vigie as propriedades que verei na próxima. 14. 14. Componentes: Olá e bem-vindos a outra palestra. Ótimo trabalho. Obriga-me, sim? Só para recapitular o que aprendemos, aprendemos sobre a beleza que aprendemos sobre o Bear para usá-la, Jess. Aprendemos sobre como indicar que a beleza está no site. Aprendemos sobre propriedades de dados. Aprendemos sobre ligação de dados. Aprendemos sobre métodos propriedades do computador, propriedades do relógio. Até aprendemos a preparar a ligação. Nós até aprendemos sobre eventos, até mesmo modificadores, eventos de entrada, maioria dos eventos, etc. Então você aprende o Senhor Então, agora, com este fundamental estabelecido agora, podemos realmente entrar em componentes. Assim, os componentes de água eram para ser usados componentes. Podemos realmente entender o que torna os componentes tão grandes em. Por que todos os amigos e estruturas preferem usá-los? Portanto, nem mesmo apenas ver, mesmo se você vai para a raiva ou se você vai para reagir porque as queixas são muito úteis para uso trimestre. Se você tem um tribunal e quer reutilizá-lo, se quiser usar a funcionalidade, você não confiou em tudo. O primeiro exemplo fora componente que vimos é Olá componente mundo que vimos na primeira palestra, certo? Talvez um conjunto de abusos aqui, certo? A propósito, você também aprendeu de você. Diga, tipo, ótimo trabalho nisso. Então vamos começar com componentes. Assim, componentes de água através da maioria das queixas de água, podemos cavar para o lado. É Deke Amazon, por exemplo, como sempre fazemos para a Amazon. Temos a barra de navegação, e tínhamos as imagens de cada página. Estes levaram visão noturna, mas e rodapé será o mesmo. Então, esses dois terão a mesma funcionalidade. Estes dois terão o mesmo olhar. Então o que podemos fazer é categorizá-los em componentes. A principal vantagem que ele tem ao transformá-los em componentes é que podemos fazer com que essa data dinâmica, então vamos ver o que podemos fazer. Então primeiro, realmente, com um componente de alto nível, vamos excluí-lo. Tudo bem, então para criar uma nova estrutura de arquivo insider componente, temos pasta separada, chamar seus componentes. Você pode clicar com o botão direito nele novo arquivo e podemos ver vista ponto cabeça. Então a porta que você indica a luta de vista. É um componente de visão, por isso não temos. Já falamos sobre as vantagens da extensão da visão da porta, certo. Tão escuro para a extensão tem seu próprio script de template no estilo, tornando-o muito mais fácil de manter e muito mais fácil de entender. Então eu criei um novo componente. Comece com um temperado básico. Eu poderia fazer isso digitando SC e você pode ver andaime. E se foi facada Não, este é um componente de cabeçalho, certo? Então queremos ter o que não está indo. Então, uma coisa a observar aqui é que cada componente precisa ter um mergulho principal ou um enraizado. Até agora, esta instância que criamos o dia em que essa é a cabeça dele erguida insensível vai criar, hum, em uma linha, certo. E se eu disser David, nós não vamos ver nada porque nós não importamos para adaptar componente então a partir de agora, são tão a partir de agora, nosso site é baseado nesse componente, então componente ab é o que está sendo processado. Portanto, não há nenhum traço de componente Heather dentro de um componente Mais tarde, dois, mais tarde componente ab saber que há um cabeçalho aqui. O que podemos fazer está dentro do guião. Podemos importá-lo importante Olá de e ele barra componentes. Olá, então a data do Ed indica a fonte suja, certo? Então, se eu vê-lo, mas ainda não há nada sendo exibido aqui. Isso é porque ainda não nos registramos. Até agora. Eles estão usando um componente. Temos um assunto. São os seus componentes. E em vez de componente, você pode ver dirigido. Agora a parte de registro está feita. Tudo bem, agora temos o componente registrado. Podemos usá-lo no modelo. Podemos ir ao templo. Ele pode ver que teve um com que nós temos à sua frente. Então o que acontece é que sempre que eu quiser ter essa cabeça em qualquer página que eu quiser, eu posso simplesmente importar o componente e carregá-lo. É tão simples assim. Então, na próxima palestra, muita conversa sobre adereços que vai se concentrar em enviá-lo para fora do componente. Lembre-se de como conversamos sobre fazer você morrer em vez de componente. Então podemos fazer isso usando adereços que será a próxima palestra. Então, uma coisa precisa sobre componente é que podemos ajudar o Sr. Componentes Então cabeça componente reserva e dentro cabeçalho, podemos ter outro componente. Então, o que podemos fazer é dentro de componentes, você pode criar um novo arquivo que diz dados nem ver componente de dados. Certo. Então, em vez disso , cabeçalho, podemos seguir o mesmo procedimento. Primeiro, vamos importar dados de dados de barra componente dentro de uma tag de script. Você vai ter uma propriedade de componentes e seus componentes vão desacelerar um componente em que podemos usá-lo. Use os dados se eu salvá-los. Oi sob devido a transportado. Assim, o componente de dados está sendo processado dentro do componente cabeçado. E esse componente de cabeçalho está sendo renderizado dentro do componente de aplicativo. Então ninguém terminou componente cabeça. E então o que é o componente de cabeçalho? E esse componente poderia, literalmente, tudo bem, então é isso. Tudo bem, então está tudo bem. Então, exceto para os componentes na direção Eu vou vê-lo na próxima seção 15. 15. Renderização condicional: Tudo bem, vamos chegar a outro elétron beleza está na direção. Então, nesta palestra estará olhando para a prestação de condições. Então vamos estar olhando para a OVI depois de parentes, por exemplo. Eles poderiam ser situação muito querer renderizar um determinado elemento somente se um certo mistério valor ou através de certos valores. Fortes. Certo. Então nós não olhamos para como fazer isso O mais é que o que nós vamos fazer é criar duas formas. Assim como os componentes. Essencialmente, vamos criar um log no formulário que deve estar registrando Northview Outro arquivo que ele vê. Mas é típico. Então é artificialmente esta forma de senhor. Vai ser muito com alguns muito simples. Eu me lembro que você deve ter apenas um elemento principal, então eu estou tendo o formulário principal dentro. Isso teria ok, entrada, entrada, espaço reservado e eu usar o nome assim da mesma forma acabar senha. Deviam ser o fim do sacana, certo? Então tivemos que nos registrar para Mary e estamos ficando complicados por contratar antigas tradições e tudo porque vamos apenas olhar para como trocar componentes. Então esse formulário sugerido e o formulário de bloqueio será muito semelhante para como este casal realmente eu posso ter isso, e eu não tenho. Você faz o para a senha. Então, apenas para identificar qual deles é qual vamos ter uma cabeça no registro em forma e para registro, nós vamos ter eu apenas para tudo bem. Então agora o que você vai fazer é remover o componente da HIDRA que importamos da última palestra. E vamos importar um órgão. Além disso, eles apenas isso para mim, e ele vai declarar em vez disso a propriedade componentes logando em Justo. Eu sei que podemos ajudar a arrancar Logan, você também pode ter um sistema, certo? Se eu salvá-lo, podemos ver que temos o log no primeiro, especialmente agora. Não queremos que estas duas formas sejam desanimadas. Queremos que eles sejam exibidos condicionalmente, então queremos usá-lo para poder alternar entre esses dois formulários, certo? Então vamos ter uma necessidade de uma propriedade. Então, insanidade, a propriedade terá um cordão variável menos show log in, e isso deve ser verdade, certo? Então saiba o que começar é para este componente ou para qualquer elemento para esse assunto, você pode ter que ele tomou ou vamos ser se tudo bem, então para B se dentro desta maneira, se pudermos ter um valor de barras no nosso caso, o barras valor é mostrar Logan, Eu digo Claro, fazer login. E uma vez que um componente de decisão é diferente do Logan, não queremos mostrar o componente médico para isso. Você pode ver se North Shore Logan então se eu disser então volte, nós veremos apenas esse órgão pela razão Aqui está. É basicamente verdade, e isso cai para que eu possa substituí-los. Ele cai e substitui-los pela verdade, e isso seria muito o mesmo. Então exiba o login. Temos rendido registro somente se o valor for verdadeiro ou registrado Logano ao vivo. O valor é falso, certo? Assim, o acidente vascular cerebral e também muito joga com show log in. E vai ser porque o curto não tenho certeza de entrar. Nós podemos fazer isso. Caso contrário, também temos outro diretor Corliss, nós, e se você tiver refeições, não precisamos especificar o registro em North Shore, então se eu salvá-lo, vamos ver o formulário de registro em si. Ninguém está claramente se transformando nisso. Podemos concluir um botão que é mudar formas. E podemos fazer qualquer Brentford na Grã-Bretanha trocar formulários neste evento e ter um medido dentro. Isto importava. Podemos ordenar o valor da costa, Logan. Então o que eu vou fazer é esta loja mostrar log in é igual ao norte desta porta costa Logan. Tudo bem, então eu estou basicamente ordenando o valor da propriedade do órgão da costa. Então, se o valor show log in é, do vai mudar. Ele cai. Se for falso, vai mudar para fazer. Se eu salvá-lo. Não, temos um botão, certo? Então, sempre que eles clicarem em um botão, o valor da costa Logan será alvo, que significa que quando você vai para as quedas quando é falso, registro desapareceu, e eu apenas apareço ervas para que eu possa fazer isso várias vezes Eu sempre quis. Agora também temos outro Derek para chamar seu “nós “? Se sim, é basicamente se Elsa Nelson está certa, então dentro do que queremos conhecer o pai, não precisa estar exatamente disponível. Você também pode ter algo tipo de como um argumento Então, por exemplo, se eu tiver disponível que diz valor e extensão e B se valor maior do que lutar. Então, se eu digo que amorosamente foram exibidos em para alternar formulários, eu posso ver o valor inicial chamado limão direito? Então, quando eu clico nos formulários de troca, o que acontece é o valor menor 11. Sobre isso, não seremos mais válidos. Hansa muda lentamente. Eles só estão nele. Então o que eu posso fazer é ver o valor inicial registrado antes, modo que agora o caminho da condição não será mais válido. Assim, isso irá parar de renderizar e instruir. Esta conferência de registro será exibida. Então, se eu salvá-lo em excesso, quais formulários estão indo para o sistema? Alexa que é controlada e bebida. Espero que você tenha uma idéia para esta prestação condição agora, por isso é muito simples, Então é basicamente usando ser se alguém mais, nós também podemos usar V else. Se é muito semelhante a isso, você pode tentar por conta própria. E no próximo setor, analisamos como passar adereços ou como passar dados para componentes e tornar esses componentes dinâmicos. Eu verei no próximo 16. 16. Props e eventos personalizados: nesta seção, vamos olhar para como ouvir dados dois componentes como dados decentes para componentes e como obter de volta dados da conferência. Portanto, esses dados são muitas vezes referidos como adereços. Então agora estamos olhando para esperar passar dados do componente filho da empresa pai, bem como recuperar sangramento de criança competente, componente aparente. Então, já temos um encontro. Um componente que criamos na última palestra dentro de seu componente. Não há nada muito mais dados. Odeio o seu dia. Oi. Emitiu um componente. Então, vamos tentar enviar esses dados esta string a partir do componente de lances. Por exemplo, se estivermos em uma beleza abominável, certo? Em vez disso, no exterior. Realmente? Para componente de dados, registramos o componente sob a propriedade components. Agora podemos usar o componente e você pode salvar dados. Esta atualização de suprimentos Ok, não recebemos nada porque eles não pensaram isso aqui. Então, nós só temos ah indo. Isso é que você precisa ter uma rota. Se assim for, teremos olhos grandes enraizados lá dentro. Isso terá unhedged em seu único título diz componente Dado. Tudo bem, então podemos ver o outro componente que eu conheço. Então agora o que queremos fazer é enviar dados para este componente, certo? Então, por exemplo, digamos que eu queira ter uma tag de histórico. Quero ter um pai de história aqui. Quero mostrar uma mensagem, certo? Então esta mensagem, eu não descenderei da dor e competente, que é uma visão abominável. Para enviar essa mensagem, usaremos algo chamado menos adereços. Então o componente de dados está esperando um problema com a mensagem de nome para que possamos declará-lo Em vez de saco de script, podemos dizer adereços dentro de sondas. Podemos ver o nome da espera apropriada. No nosso caso, é uma mensagem, e esta é uma opção, mas é melhor tê-lo. É uma boa prática ter isso, então geralmente você estava apenas mensagem limitada. Seria isso. Mas em termos de boa prática, geralmente é bom fazer isso. Podemos declarar o tipo que é uma string em, é necessário, e é também. Então a significa propriedades regionais para que um pequeno problema que eu mencionei necessário. É verdade para este problema, então se eu guardar um componente estéril e interno , não enviaremos dados. Não vamos enviar a mensagem, o que espera, certo? Então, se eu ir para o nosso site e se eu abrir o log do console, vamos ter um aviso de exibição faltando necessária mensagem quebrada porque nós declaramos que eu melhor através e é uma cadeia de caracteres de tipo. Tudo bem, então agora para enviar esta mensagem problemática, o que podemos fazer é insanidade. O componente. Você pode ver mensagem Gordon e dentro de sua mensagem, eu posso passar Idiota de Robert E. Então ele criou uma propriedade. Essa é a mensagem dele. Vamos ver Olá do componente de dados e aqui vamos ver mensagem. Então, se eu salvá-lo, podemos ver isso. Então, se uma atualização do outro lado for embora porque estamos enviando o dodô para que também possamos enviar vários adereços. Por exemplo, se ele também está exigindo idade, prop contra o tipo de idade deve ser número e ficar quieto os meninos. Então, uma vez que a idade não é obrigatória, podemos apenas dizer que é falso. E se eu salvá-lo, não teremos outro em relação à idade porque exigiu que seja falso. Em vez de componentes de construção, podemos ter outra propriedade chamada sua idade. Estou dentro de um segundo. Cendant. Ninguém. Eu sinto muito. Então só para mostrar esse medidor aqui idade eu sei idade. Então um Justin, é assim que está enviando dados do componente estéril do componente filho. Mas como enviamos dados do componente filho? Trás sido componente. Então vamos usar algo chamado nós. O Emmett. Ok. Tão querendo muito. Vamos remover componente de dados do nosso ab Broadview, e vamos importar componente de registro. Eu vou como log dentro da propriedade de componentes e pode usá-lo. Logan, eu guardo. Estou ficando melhor. O cartão é antigo login. Tudo bem. Componentes, certo. Seus componentes. Então, se eu guardá-lo, mande o diário informar aqui. Dentro do formulário de log, eu posso ter um botão pode dizer enviar. Dado o seu tipo de enviar, podemos ter qualquer ouvinte evento enviar e começou Impedir o comportamento padrão, dizendo prevenir e podemos ver sub ele formulário. Então, em vez de ID de script, podemos ter uma propriedade em vez de minutos Propriedade que você pode basear em mentorado enviar formulário. Mas agora somos apenas um registro de console. Preocupado com o registro. Tom submeteu o feijão. Certo? Então economizei 10% do que podia. O formulário de mensagem do console foi enviado. Então saiba que o que quero fazer é do avesso. Broadview, eu quero que você faça backup. O que eu quero. Mas eu tinha... brincadeira. Saco dizendo mensagem dentro desta mensagem. Eu removo esta mensagem e basicamente quero saber se o formulário foi enviado ou não. Assim, primeiro formulário tem sido submetido ao norte. Certo? Então podemos até ter um emoji aqui. Então, se eu ver formulário não foi enviado. Então, o que queremos é que quando você entrar no formulário e apertar o botão enviar, eu quero a mensagem aqui na visão de Abdur. Nenhuma mudança eleita Então começaria a ser em vez de cônsul registrando-o. Podemos dizer que este dólar porta companheiro em apresentar um atraso. Então, basicamente, o que está acontecendo é que podemos gostar de enviar ou acionar para sequestrar a visão de que o formulário foi enviado. Certo? Então aqui podemos receber o gatilho indo ed em enviar para casa submetido. Então, ao receber este Tigger a partir do componente de registro, podemos obter o nosso próprio método em vez de componente. Então, submetam-se. Estou acionando os formulários do medidor enviados. Então, se eu salvá-lo E se eu vou para métodos 25 c formulários submetidos e dentro deste eu tentei mudar a mensagem toe distorcer mensagem igual fazer formulários apresentados direito, vamos atacar se eu vou para o nosso site E se eu pressionar enviar que a Sra. é mudada Então, apenas para passar por cima do que aconteceu aqui é em vez de componente de registro quando o formulário está sendo enviado Estamos emitindo um evento sobre o nome sírio está em enviar É um cliente Mesmo que nós projetamos que estamos recebendo está em demanda de verão em vez de rap que você estava registrando é definido nele enviar neste evento ocorrendo Estamos tentando executar este formulário submetido método e dentro deste formulário sub lesionado Nós alteramos a mensagem para formular remetentes tão fresco que temos formulário não foi enviado Click forms enviado. Tudo bem, então isso é como enviar dados para cima do componente pai do componente filho usando adereços para obter de volta dados de componentes filho aparecem incompetentes usando eventos direito. Na próxima palestra, olhamos para a segunda aparência da vida de um componente. Isso deve ser interessante. Verei no próximo. 17. 17. V-for com representantes: neste eletricamente olhando para antes até agora parece intemperança, por isso é tópico muito divertido e muito fácil de entender. Então, o que vai perder? Will Decatur Novo componente fictício Você acabou de chamá-lo manequim Don't View e disse que este componente fictício terá um líder que diz, Ei, componente familiar tudo bem, nada realmente criativo. Então, em vez de script, eu componente realmente importante, digamos, para o manequim de barra em diante, vamos registrá-lo sob a propriedade de componentes. Diga boneco. Não, é um entorpecimento. Eu sou um componente, certo? Ou então? Um componente de hematoma. E o assim, por exemplo, eu queria componente Demi para ser menos de 10 vezes. Então o que posso fazer é chamar a Besta ID várias vezes e guardá-la e jantar assim ou mais um assunto. O que posso fazer é criar um loop for. Eu posso vê-lo antes do componente e depois. Então, se eu ver, você não acabou só com o fim dos tempos. Então, basicamente, o que está acontecendo é que podemos ter essa dinâmica numérica também, então o que perdemos? Nós o criamos. Propriedade de dados que diz número que vai estar vazio por enquanto e lamber bem. Isso diz ordem de paz no número. Vamos ser mortais. É o número. Tudo bem, então o que vamos fazer é dentro do componente de sintaxe antes em número. Então, o que está acontecendo? É ler componente atômico centeredness tantas vezes quanto a propriedade de dados off número. Então, por exemplo, se você esteve aqui entre diferentes tipos de componentes, então se eu salvá-lo, nós temos o nosso enter a variável de entrada número. Agora, se eu disser, um vai ter um. Mas uma coisa você percebe quando eu digo zero negativo coop. E se eu vir outro zero, teremos três. Então, basicamente, não estamos recebendo 100 100 componentes, mas estamos recebendo três componentes diferentes. Por que, uh, a razão pela qual isso está acontecendo é que os valores trazem armazenados como um fedor. Certo? Assim, o componente fictício está sendo processado tantas vezes tem o seu ímpio na string. Certo? Então, se eu tiver vários caracteres, terei vários componentes diferentes. Mas e se eu não quiser isso? E se eu quisesse ser um número? O que podemos fazer é ou podemos convertê-lo em fazer, hum, mas usando uma propriedade de relógio usando uma propriedade de relógio começa em número em. Não é possível substituir o número inicial usando o número neste número de loja. Então, se eu disser isso, eu posso ver. Então eu vou pegar depois 200. Vamos conseguir 100 em cada off. Fazer isso é por eu acho que é um atributo para o B mais do que podemos remover o relógio . Podemos ir ao mortal e você pode ver o número do ponto. Então, se eu disser número da porta, ele aceitará apenas números ou se você converter a propriedade de dados em um número, certo? Então, se eu ver, então agora eu estou recebendo 10. E se eu disser 100 nós ficamos com os 100. E se eu 306.000 iguais para que você possa ver que devemos estudar de acordo mostrando-me que há outro para esta linha em particular. Então a razão é, é como colocar índice. Então, geralmente para um componentes fora. Olha, nós precisávamos de índice, então eu meio que gosto de identificar de onde eles são. Então você tem um índice, podemos dizer componentes índice combo. Eu não vou conseguir um índice chave passado. Então eu digo que este homem se foi. Eu sou um complacente , uh, olhando luta igual. Então, tudo bem, como aprendemos nos seis candidatos anteriores e em adereços para diferentes conferências. Certo? Então, por exemplo, vamos ver os competentes exceto adereços. Como um número que comprei, você deixou cair o número das fraldas? É necessário? Sim, é necessário. Então, se eu salvá-lo, eu sei que eu substituo o componente Hey MME. E vejo no meu dígito de índices. Tudo bem, então se eu ver isso dentro dele, eu posso enviar o valor para o componente fictício usando o Índice de absolvição de dígitos. Então, se eu fizer isso e se eu salvá-lo, nós também podemos manchar escondendo um plus para o índice. E se eu disser quatro, eu tenho +1234 Então é isso para este que eu vejo no próximo. 18. 18. Hooks de vida: nesta palestra, vamos olhar para os ganchos do ciclo de vida. Assim, o ciclo de vida da água parece ciclo de vida olha para um conceito muito interessante com a ajuda de ganchos de ciclo de vida. Podemos compreender quando o compromisso está a ser criado, quando está a ser destruído, quando está a ser actualizado quando está a ser montado no Lockport. Então vamos puxar em sua vida segundo fluxograma de gancho em. Podemos investigar isso. Então esta é a aparência do ciclo de vida, fluxograma. Então, se você pode ver a primeira coisa, o que estamos fazendo é criar uma nova visão. Instância tudo sobre a criação da nova instância de exibição, ele configura todos os eventos e métodos de ciclo de vida. Então inicializando eventos e ciclos de vida, então o que acontece é que ele dispara um segundo gancho vida mentor estes antes de criar, criado assim e água, os ganchos que temos fora do gráfico baixo. Podemos usá-los para o tribunal de resgate ou podemos usá-lo para realizar uma ação entre esses eventos do ciclo de vida . Assim, o primeiro 1 é antes de criar, para que possamos usar antes de criar o componente vista tem a atividade e usado nele. Como você pode ver depois, antes que tenhamos o em raspar injeções e reatividade, certo? Então, depois disso, a conferência está sendo criada. Então, essas aparências da vida são muito, muito importantes. Quero dizer, esses olhares de ciclo de vida podem ser muito úteis. Assim, por exemplo, antes de criar criar qualquer um destes pode ser usado para executar uma solicitação de rede. Assim, enquanto o competente está sendo montado e carregado, podemos executar em um pedido de caminhão em que podemos obter os dados e uma vez que a conferência criada, basicamente verifica para uma opção elemento. Então, se você se lembrar da primeira palestra ao ser visto bilhete em um site existente , temos uma opção elemento. Então, se ele tem um elemento, componente vai levar para a opção temperada. Mas se ele não tem um componente de elemento, você vai para a montagem? Então, levará para o modelo depois de verificar o modelo. Então, se ele tem, um modelo, irá compilar modelo em função de renderização. Mas se ele não tem um modelo, ele irá compilar os elementos coração HTM como um modelo. Então, podemos ir para antes Mountain Mountain, então estes dois estão relacionados com a montagem do elemento indo para o dormitório ou indo no componente para a cúpula depois de montado. Temos alguns ganchos de ciclo de vida de investimento antes de operar um Brigid. Portanto, esses dois looks de segunda vida podem ser usados quando o dormitório virtual está sendo atualizado ou antes da cúpula está sendo atualizada ou postar. A cúpula foi operada para que possamos executar algum tipo de ação ou qualquer um desses looks de ciclo de vida, para que possamos também mais intervenção. O competente está sendo destruído. Então, antes de destruir e destruir são os ganchos de ciclo de vida usados para isso. Então, antes de destruídos, poderíamos executar algum tipo de ação de salvamento para que possamos executar algum tipo de ações de navegação , etcetera em destruído, pós-destruído. Você pode enviar um evento ou condená-lo a um evento, qualquer coisa que queira fazer quando sua empresa for destruída. Como assim. Estes são os looks do ciclo de vida. Então vamos experimentá-lo nos componentes reais para que possamos entender como ele realmente funciona. Então, o que realmente, é que vamos começar com o componente APP, então em vez de ter componente, terá alguns dados. Isto é tão confortável, certo? Então, se eu salvá-lo em, podemos usar os ganchos segundo vida em causa um Script AG semelhante a quaisquer outras propriedades. Então vamos começar os segredos da vida desde o início criará o antes de criar métodos criativos antes de criar. Então, para cada ciclo de vida, Huguely está criando mensagem de alerta para que possamos entender quando o gancho do ciclo de vida está sendo chamado após a criação, recebemos o criador. Uma vez criado é feito, nós temos a montanha antes montado. Então, antes da Montanha Montanha que costumava montar o competente no dormitório. Então, em vez mantra, Você pode ver uma carga montada e espero que depois da montanha. Então, neste ponto, podemos ver a tag alta churn. O que quer que esteja aqui é esse componente. Não vai ser. Não será visível para nós até que as funções da montanha sejam executadas. Assim que o composto estiver montado no dormitório , podemos ver o componente ou sinto muito. Podemos ver o elemento. Então temos mais dois ganchos de vida antes de destruir destruídos. Acho que, para ver antes da história e da história, talvez tenhamos que criar outro componente. Então, por enquanto, vamos com ele. Os dois ciclos de vida mais olham antes de eu falar mais tarde. Tudo bem? Se eu salvá-lo, eu o coloco em execução no servidor local e se eu disser servidor local, teremos o primeiro alerta. Então, inicialmente, é um estágio de antes de criar Então, uma vez que o antes de criar é feito Então, de modo que escapamos de uma nova instância de visão sobre ele inicializou os eventos na vida Segundo ganchos. Assim que os eventos do ciclo de vida tiverem sido inicializados, podemos ter acesso aos ganchos do ciclo de vida. Então, portanto, o método antes de criar em Se eu disser ok, eu sinto muito. Então, se eu atualizá-lo para que se eu ver ok, eu obter o criado em neste ponto do tempo, leva para a opção elemento e teve que atualizar novamente. Então, depois de criado, se eu disser OK, eu vou obter o mês anterior. Então agora ele vai montar o componente no cão. Então, se eu disser OK agora montado é feito tantas vezes localizado, devemos ser capazes de ver o ódio pai. Então, ok, e isso é uma tendência. Então é isso que não acertamos. Então agora, antes de olhar para antes da história e destruído gosta olhar dedo antes de operar operador, certo? Então, para que isso funcione, vamos sair disso. Nós sabemos e jogamos isso lá dentro. Sim, para isso funcionar, precisamos criar uma propriedade comentarista de componentes de dados dentro da propriedade de dados. Vamos ter ah, variável. Vamos dizer o nome dele. Apenas um exemplo comum. E é ter um espaço reservado de campo e o nome e vamos vincular você fazer nome usando o mortal. Então, agora, se eu salvá-lo Então, o que no componente tem que atualizar, certo? Então, se eu tiver que passar por todas as coisas de novo antes da Montanha destruir, sim, então já que a conferência está sendo reconstruída novamente, estamos chegando lá antes da loja e destruído Ciclo de Vida olhe aqui, Então montado sobre este é o componente E aqui está o nome. Então toda vez que eu entro algo nisso, então toda vez em algo para isso, o dormitório Tiny ou a propriedade de dados muda no dormitório tem uma grande direita. Então, toda vez que a cúpula tiver que atualizar, ele disparará os ganchos para o segundo ciclo de vida antes de operar a atualização. Digamos que eu entrei. Nunca recebemos as atualizações anteriores. Então, antes do intervalo, poderíamos executar algum tipo de ação antes que a cúpula seja atualizada. Podemos executar qualquer ação, se você quiser. Oh, eu sei. Assim que o apelidado estiver feito, vamos sair dessa vida. O segundo gancho é o seu actualizado. Então, dentro do assunto admitiu semana outro íntimo o usuário que alguns dados foram alterados ou qualquer coisa foi feito. Se eu disser OK, é você. Então isso vai acontecer para cada instância única, porque eu não tenho alerta para cada antes de atualizar operado direito. Então agora vamos olhar antes de destruir, destruído. Para entender isso muito melhor. Vamos puxar o componente de registro e, disse Rajan, vai? É apenas através do antes destruir e destruir. Então, vamos também elogiar estes. Salve-os. Então, a razão pela qual eu tenho formulário de registro aqui é vamos também entrar estes para fora desde que não vai estar precisando destes todos. É também criar um botão que diz Destruir componente de registro e dentro da propriedade de dados . Vamos ter um valor booleano, eu sei, mas registrar? Vamos ter um bife. - Claro. Logan, pela garrafa. Não tem evento clique evento, e podemos apenas ordenar o valor da costa Logan, já que é uma única linha, enfraquecer o seu começou aqui, então se tudo deu certo, se este componente for destruído, ele deve encontrar fora para eventos que diz antes, antes do início da indústria. Então vamos tentar isso. Então, se eu pressionei destruir componente log eu recebo antes destruído, e se eu disser ok, eu obtenho o destruído, então o componente de registro não é mais visível, Então, se eu clicar novamente, ele aparece em, e posso destruí-la de novo, uma luz. Então, isso é bom. Então, estes são olhares de ciclo de vida, e na próxima palestra vamos olhar para rotear o que é visto ordem e como Ryan ou coisas necessárias em que é isso para este. Vou ver o próximo. 19. 19. Mixins: Tudo terminando esta palestra, olhamos para algo chamado de mixins, então misturas são muito úteis em termos de você, Jess. Então eles nos ajudam a evitar muito fora do cordão repetido. Torna o elefante não mais fácil. Então vamos olhar para como criar uma mistura e regar isso. Então eu mudei as coisas. Pasta Ordem da Internet. Eu coloquei a empresa em casa dentro da casa. Está mudando o tipo necessário cai para que não entendamos, entendeu ? Não é o console, por exemplo. Vamos ver. Vamos ter um, uh qual deles? Onda nós temos. Vamos ter uma propriedade de computador também. Esse é um bom encontro. E dentro desta propriedade candidata, vamos voltar. Corda fora. Novo fez isso criamos um novo objeto feito em. Vamos acrescentar, Inferno, eu guardo. Estou pegando os mortos. Então, e se eu quiser apenas o substrato fora dele? Digamos que eu queria de zero , 11 ou 15. Digamos 15. Então, se eu disser 15 vamos assistir sexta-feira durante o 2º 2019 certo? E daí se eu tiver outro componente? Digamos que eu tenho um componente como cabeça. É importante à frente do componente. Vamos registrá-lo. Há problemas lá dentro. Hider barra salve-o. Temos alguns detalhes. Aqui temos o analista Hello Agnes realmente mover isso aqui. Também temos algo chamado “Estatal”. Também é remover isso. Se eu levar tudo para cima, eu guardo. Está em branco, certo? E daí se estivermos usando outro componente? E também queremos que o dia seja visível aqui, certo? Então retrato Lewis. Então teremos que criar outra forma de propriedade do computador. Temos um encontro de cigarro de novo. Eu sei que fizemos objeto Estado string e, em seguida, novamente, sub string. Essa porta passa de estar bem? Então esta é a repetição do tribunal soviético usando o mesmo obter esse assunto em vários lugares em casa, bem como ele foi para a direita? Então o que podemos fazer é em coisas como relacionar esta propriedade da empresa em cada componente, podemos criar uma mistura. Então, na fonte, vamos pegar uma nova pasta em que Nixon está, em vez de misturar. Então temos um encontro misturando RGs, certo? Então, dentro deste arquivo, o que é Lewis e dizer exportação. Então ninguém para dizer exportação padrão. Podemos usar a mesma sintaxe que usamos dentro do script de volta para que possamos copiar as propriedades completas . Daqui em diante, você pode basear isso. Diabos, pareceria o mesmo. Então saiba que o que você poderia fazer está lá dentro. Em casa, podemos remover a propriedade do computador. Em vez disso, podemos importar a mistura. Então agora que você tem importante a mistura de datas, queremos usá-la e usá-la ou três, Lewis criará. Nós ajudamos cantos de propriedade misturar ins em começar uma data de sinal Lixian em se eu salvá-lo, e se eu voltar, não está funcionando. A data de hoje é do componente doméstico, e não está funcionando, a razão pela qual não está funcionando. Está dizendo que a boa data não está definida? Certo? Então a razão é misturar normalmente, exceto em uma propriedade. Então, para isso, como criar, casar e ter que incluir oito mixagens, e se eu salvá-lo, está funcionando bem. Então é a mesma coisa com a cabeça também. Então nós colocamos um par de propriedades em realmente colocar a mistura em, e você pode ver mixins dentro da mistura de data. E se eu salvar, seria trabalhar luta então, em vez disso, a mistura e você pode ter a propriedade de dados também. Se eu salvá-lo. E se eu voltar para o cabeçalho em, se eu ver se eu salvá-lo e voltar Olá de mistura parece tudo bem. Então agora você pode estar se perguntando. E se houver um caso em que a propriedade complete como Get Date também está disponível na Propriedade Header, por exemplo, eu tenho uma propriedade de computador nele também é chamada Gideon e, em vez disso, transforma uma pequena string que diz “Get Did direito”. Então o que acontece é quando a propriedade dentro de um competente é nomeada semelhante à propriedade em Santa Mixon. Geralmente, a propriedade dentro do componente é dada alta prioridade. Então, se eu salvá-lo, eu vou obter data para o cabeçalho. Mesmo que estejamos importando a mistura que tenha uma boa data concluída, Roberti que você insistiu, tudo bem, então é tudo para misturar. Verei no próximo. 20. Introdução em vue-Router: nesta saída vamos olhar para o odor visto Então, o que é vista ordem e por que precisamos dele? Então visualizado organizar basicamente usado para navegação dentro do aplicativo Então, geralmente a razão pela qual precisamos de uma biblioteca específica pode afetar para a navegação em si neste tipo de aplicações extinguir é navegação dentro de nós SP é muito diferente da navegação sete em nosso site. Então, como já vimos exemplos anteriores de como o site é diferente de um SPD dentro de um único aplicativo bit que não queremos, só queremos que a competência seja trocada. Nós só queremos que os componentes sejam, você sabe, alterados à vontade. Então, para isso, nós não podemos usar nós se eles só querem fazer componentes Mas se há muitos, muitos componentes que não podemos usar VF. E também se você quiser mostrar a um parceiro competente em particular, você é l. Nós não podemos usar nós para isso também. Então, à medida que você vai, você realmente não entende sua importância e por quê. É meio que usado dessa maneira. Então vamos começar com isso. Então, para instalar visualizado exterior, podemos ir para o terminal Eu tenho um projeto aberto aqui. Então, uma coisa só para lembrá-los, espero que o alvo da galinha seja muito positivo. Então, cada palestra está sendo para começar com o novo tribunal. Então este também será atualizado com o novo tribunal para a bela palestra. Então você pode seguir junto com o papai. Mas aconselho fortemente que me acompanhe enquanto faço as coisas. Tudo bem, então podemos adicionar a ordem do espectador usando o Young. Eu estou usando jovem, mas se você quiser usar NPM, é NPM Install view hífen rotor, metade no céu. Bocejo seguro visto odor. Então isso está instalado. Assim que estiver instalado, podemos entrar em mim e Georgie e declará-lo dentro dele para que saibam disso. Você sabe, nós não estávamos na instância view para ser associado ao seu pedido. Então podemos fazer isso dizendo importação. Sem dúvida eles, você sabe. Então, depois disso, o que precisamos fazer é esperar para dizer que ele precisa ser associado com esta biblioteca para que possamos salvar você Não use e em que é um índice de comentários. Quando você está tipo de como importar um novo trabalho cedo para os poucos projetos, então salve-o. Então, agora temos indicado Vieux Port View filha para isso. Agora podemos criar um novo arquivo que diz Notre Togs. Dentro deste arquivo, podemos criar uma nova instância de ordem, exportando-a e é automaticamente importante da sua biblioteca de pedidos para mim. Então, em vez de você, Doutor, podemos ter outro sobre rotas. Eu não disse isso Cidade Velha. Lá se vai isso aqui. E em vez da velha Cidade, podemos ter um novo objeto para o picado que temos a parte que podemos ter antes mesmo de criarmos , criar algumas partes. Precisamos importar componentes para isso. Por exemplo. É importante que os componentes façam login e se inscrevam ou registrem o login de importação. Então, agora que temos a conferência importada, o que podemos fazer é criar peças para esses componentes. Por exemplo, a parte da estrada seria o nosso componente aplicativo em. Podemos usar o componente de log como barra de login, e cada objeto precisa ter tipo de como eu quero dizer, não usa para ajudar, mas tipo de como tem um certo conjunto de propriedades como nome. Você pode dar os nomes da conferência também, ou dar os nomes das partes também, como eu posso dar um slogan nós também vamos olhar para o porquê solicitar a parte A menor? Então também vamos investigar por que ele precisa e os homens separados enquanto continuamos porque Norden pode ser feito de duas maneiras. Então também vamos investigar por que ele precisa e os homens separados enquanto continuamos porque Norden pode ser Está no nome da parte artesanal também. Então, mais uma coisa. A próxima coisa que ele requer é que este é obrigatório, então ele precisa de um componente qual componente para ser associado com isso. Mas assim que é log-in. Eu gosto que discutimos nas palestras anteriores como Begin chefe, Pobre adereços o componente certo? Então ele também precisa tipo de como ter um adereços assim com este componente seria lidar com adereços. Então isso é algo que precisamos, disse Drew. Porque se estamos lidando com adereços no componente, não, podemos seguir as mesmas diretrizes para criar uma parte para o componente de registro. Você pode ver parte. Eu não cortar realmente só você pode dizer que o nome é que eu simplesmente não faço. Nosso componente aqui é registrar outro Dax de Rob, mas isso digamos falso. Certo? Então, agora isso o salvou. Muito bem, agora temos a nossa visão. Instância do roteador. Então, precisamos associar esta visão filha Instância, com energia de braço s em maio Energia como temos esta biblioteca ordem, que está ligada a ver instância. Mas também precisa saber o tipo de rotas que a arte requer. Então, para isso, o que podemos fazer, podemos importar este arquivo. Você pode importar como as dúvidas da direita. Então, uma vez que tivemos isso fora do anotado, o que podemos fazer é dentro de sua visão, exemplo, podemos apenas ver notas. Então, agora a instância de view o tem incorporado a ele. Então, se eu salvá-lo agora, a vista externa está ligada com o projeto, que possamos ver vista ordem em todo o projeto. Qualquer bebê nascido. Então, digamos, até um rab, queremos saber como tipo de navegação, mas certo, e assim, e assim, em termos de exibição de seu conteúdo externo lá para partes específicas a serem lembradas, o 1º 1 é esse link externo que é link. Isso é para navegar o usuário de uma empresa para outro componente. Mas também precisamos ter outro tipo que diz que escreveu de você isso é usado para exibir os componentes que estavam navegando dedo do pé Você está inocentemente em breve. Portanto, cada total tem a propriedade Call s to neste indica a parte que definimos dentro do roteador. Então aqui temos o log de barra direito. Então, podemos se logar aqui também em vamos ter algum log de texto em modo inicialmente acima componente carregamos, vamos ter alguma indicação de que fica para cima componente que eu sei Então não. O que acontece é que se eu apenas entrar em nosso site eu não posso ver nada que facilidade. Não vemos nada, mas temos outro que é escolta ler propriedade correspondente de indefinido. Então, a razão pela qual estamos sendo dito que é se você vai para o jazz porta principal em vez de você instância estamos adicionando rotas aqui, mas você não reconhece. Então isso é assim. Este é um dos erros muito comuns que os desenvolvedores fazem isso instrui especificando rotas Aqui. O que você pode fazer é se você considerar a foto e outs para que você só sabe aceitar fora de propriedade. Então, quando você dá para fora, não combina com isso. Então, se eu guardá-lo e voltar, meu Ariza vendeu. Então, se eu clicar nele, o que acontece é que o componente de registro será renderizado nesta entrevista. Então, em vez disso, este tipo de você você verá o componente de registro. Agora o tronco. Agora há entrevistas vazias, mas se eu clicar nele, formulário de registro aparece e você também pode ver no u. R L que o registro de barras apareceu. Agora, se eu voltar, podemos ver apenas Slash. Mas você pode estar se perguntando, sábio, há um pequeno hasher? Certo? Então isso tem a ver com algo chamado menos fora do roteador para que possamos ir para a porta externa . Jazz e dentro são revisados. Ordem. Instância. Podemos ver mais história. Então aqui em mais 10 Se eu disser haxixe, pegamos o haxixe. E se eu disser história, não teremos mais Dub Hashem com pesquisa. Apenas vá aqui. E se eu clicar no Logan, fico com a barra Logan. Tudo bem, então vamos fazer uma coisa. Vamos criar o nosso elo exterior. E para o 2º 1 vamos vinculá-lo para que seja um componente. Segundo disse que eu só, um certo, então vamos fazer essas ligações um pouco maiores, então eu guardo. Temos grandes componentes, e posso apenas dizer que somos. - Sim. Então isso é apenas assim que isso realmente enviou um link será vinculado ao registro, mas em vez de notas sobre este log no projeto de lei para o registro em log. Então, a partir de agora, eu tenho o componente de registro. Posso ir para a página inicial. Eu quero. Você pode dizer para entrar e pegar Logan? E se eu dissesse que eu sou apenas um formulário. Então, quais são os competentes? Eu estou indo. Eu quero mostrar que entra em que fica na estrada para a ordem de você. Etiqueta. Então é isso para esta palestra. Nesta palestra, aprendemos sobre um link em nossa entrevista. Sei que parece confuso em um processo muito longo para apenas navegação, mas acredite, vale a pena. Tudo bem, eu vou ver no próximo 21. 21. Rotação programática: Então isso é uma continuação de você, filha. Então permite que você possa fazer o que mais de sua filha pode fazer e de que outra forma podemos usar a vista. Filha. Então esta é uma maneira de navegar nos diferentes componentes. Aquela aplicação, certo. Então, o que podemos fazer? Assim, a primeira coisa que podemos fazer é também falar com outras queixas de outra forma. Por exemplo, temos dois, certo, Então nós também podemos ter essa dinâmica de modo que é usando me ligar e você pode vê-lo ir. Então, mas agora é Instância, se você quiser ir para um componente, precisamos usar uma sintaxe separada. Precisamos criar um objeto. E dentro deste objeto, precisamos dizer o nome dentro do nome Benito Express para o nome. Então, este nome é dado na luta de dúvidas por líquido na parte de componentes. Então é por isso que este nome era importante anteriormente por nós meio que queríamos incluir. Portanto, este índice também será usado no script de volta. Você entende? Quando olharmos para isso, se eu guardar isto, digamos , Logan, funciona da mesma forma. Assim, você pode voltar para o registro da página inicial. Funciona da mesma forma, certo? Então esta é apenas outra maneira de usá-lo. Agora vamos procurá-lo, um cenário em que avisamos para passar um adereço para este componente. Então, por exemplo, no login, queremos ser possível, diz Upton. Então vamos criar a propriedade do Rob. Eu queria os adereços para dados de passarinhos, nenhum objeto sobre o tipo de problemas que queremos receber a mensagem dele. Mais uma coisa que quero mencionar. Nas palestras anteriores, quando falamos sobre adereços, discutimos que esta rotação geralmente certa para a sonda, dizendo exigido sob seu tipo é geralmente uma boa prática, certo? caso tão distante que você não conhece hoje de todas essas coisas, então os problemas não seriam um objeto. Então, para isso, você precisa decair. Props não é amigo, e em vez disso, você pode mencionar gotas sob marcas de tradição para que você possa ver uma mensagem. Então, isso declara automaticamente a propriedade message como uma sonda, que o conforto do login está esperando. Então é a mesma coisa que criar nosso objeto. Estou fazendo tudo isso, mas só se você quiser ter muito mais controle na sonda. Como se fosse necessário. Ou você pode mencionar assim, certo? Então, para nós, vamos com a melhor prática dentro deles, essencialmente de, digamos, que tipo é. É um tipo de corda. É necessário? Na verdade não, mas vamos dizer falso. Então, se eu salvá-lo, sei que nosso objetivo é enviar uma sonda ou uma mensagem para o componente de registro, certo? Então, para isso, vamos criar propriedade de dados. Digamos que é mensagem Morgan. Esta é a mensagem que, que você deseja enviar a massa o componente de registro para que o bebê possa enviá-lo para o componente de registro está usando o link externo. Podemos ver depois do nome novamente para Tacoma, e então podemos Podemos ter o núcleo de propriedade menos fundos, então os problemas é geralmente usado para ele adereços. Então, em vez disso, problemas. O que podemos fazer é dar o nome fora da entrega que a conferência, esperando em seu valor é mensagem para entrar. Agora, estamos enviando a sonda. Então, em vez de registrar Northview, o que vamos fazer é sob o registro, Inform criará uma pequena cobertura de quatro dag dentro disso Vamos ter a mensagem. Então, de uma visão ampla, isto para recapitular. Temos uma data de esquinas bonitas de LA, Sra. Logan, e por dentro temos uma corda. Vou enviar uma mensagem. Precisamos de uma nova propriedade. Corliss Bottoms em vez de eu sou seis e objeto. Temos o nome do nome dos problemas que o componente está esperando em Desvalorizar. Certo? Então, se eu salvá-lo e voltar, eu sei que se eu navegar para entrar, podemos ver a senha é 12345 Tudo bem, então essa é a mensagem que eu estou recebendo do componente APP. Não. E se tivermos um problema agora? É só mais este tipo de colheitas. É difícil enviar qualquer que eu sou, já que o adereço não é necessário. Digamos que temos outro direito competente. Este componente é o lar. Estou dentro do componente dele. Temos um grande qual que diz “Bem-vindo ao lar”. Tome um smiley também. Apenas jogue lá dentro. Então, se eu disser David agora, o que eu quero é que o registro de incidentes tão incompetente. O que eu quero é que alguém argumente esse processo. Isso é uma grande parte em que quero que eles sejam navegados para casa. Então, como podemos fazer isso? Então aqui no componente Argon, nós temos um pouco importante até agora. Isto um pouco. Temos ação Lincoln que é um pouco forma assim ao clicar, enviar formulário o que podemos fazer isso. Podemos usar essa propriedade exterior para que possamos usar vendo esta porta dólar Notre, não arbusto barra em casa. Antes que possamos fazer isso, precisamos voltar a um roteador ligado. Precisamos registrar o componente. Meu dizendo importar para casa a partir dele barra componentes barra barra casa. Eu criei outro, mas dando-me mais componente caseiro fora de casa Onda Desde que ele pode aceitar adereços no futuro, vamos apenas dizer inclinar-se. Então, em vez de registrar componente E se eu salvá-lo desculpe se eu salvá-lo e voltar, o que podemos fazer é ir para entrar e podemos dizer um muçulmano xiita e minha senha é algo alguma coisa. E se eu me separar, dê as boas-vindas a casa. Então esta é uma maneira de navegar usando a ordem dentro de um saco de script. Então isso é programaticamente de acordo com ele. Então, mais uma maneira de o que podemos fazer é instruir dando-lhe um Você realmente está aqui. Você pode criar um objeto, e podemos navegar usando o nome do nome também. Então isso é como o que fizemos com totalizar a direita. Então o nome é casa, e se eu salvá-lo e voltar, e se eu pressionar Enviar. Bem-vindo ao lar. Tudo bem. Então agora vamos olhar para como passar data up. Tipo como no roteiro tão semelhante a ter ajudado em que fora do link. Também podemos ajudar Adams. Podemos passar um dado. Então, o que nós Lewis pretendíamos em Home Beach? Bem, eu tenho um problema. Use o nome e que é necessário na cadeia de diabetes. Certo. Então, bem-vindo ao lar. É ele? Então, o que quer que eles usem o nome que o usuário Anderson disse Faça login na página aqui, aqui no nome do usuário. Podemos passar isso para a página inicial em enfraquecer. Mostre isso aqui. Então página inicial do incidente. Precisamos também ter nossa propriedade de dados em vez disso. Isso fica bem, era o nome e não podíamos ser mais, pois não? O que? Limitamo-la à propriedade dos nossos dados usando o mortal. Tudo bem, então o fundo que ele faz é esperar é usar o nome e o mesmo com as mesmas pessoas que estamos usando. Então, usando-o e o valor é que esta porta era o nome. Tudo bem, então, 11 coisa a notar aqui é que isso para que este teclado possa ter o contexto certo , já que está dentro dessa função externa. Então o que eu costumo fazer é que eu tenho Ah, boneco. Eu tenho uma boa variável de milho x, e eu usá-lo para isso. Então nós apresentamos ele e eu guardo e volto para dentro do Logan Component. Eu posso ver que ela e eu podemos usar meu pastor. Isso é outra coisa. E por isso fiz as boas-vindas a casa. Ela está bem? Então foi assim que você passou um pouco mais alto. E mais uma coisa só para lembrar é que enquanto o passageiro entra nos componentes está indo para lá. Você precisa especificar os adereços. A propriedade tem tropas, certo? Isso é uma coisa que você não deve esquecer. Então, tudo bem, isso é tudo para esta palestra. Te vejo no próximo. 22. 22. encaminhando com exemplo: Olá e bem-vindo novamente, Então vamos fazer algo interessante. Então, na última semana, olhamos para apodrecer, certo? Então vamos olhar para ele de um ponto de vista de exemplo. Como adicionar é um conceito maior, é muito mais difícil de entender. Como poderia um exemplo aqui? Então nós temos esse gerador Jason sem fio perturbado hífens adjacentes em dois pontos com. Qualquer gerar alguns dados fictícios que podemos usar para um projeto no nosso caso. Como corporativo são dados sobre como criou um novo coordenador de arquivos, um Jason e dentro, é baseado em tudo. Então é basicamente são Jascha Corpo, consistindo de Job faz obter objetos. Então, cada objeto consiste em algumas imagens ruins como o índice I D. Equilíbrio , nome da idade , sexo, etc. Certo, então vamos ver como podemos usar isso. Então, se eu for ter vista ao ar livre, nós tínhamos esse lado total. É ele com eles. Deixamos a visão externa como ele é salvá-lo em um arquivo roteado ou Js. Vamos também algumas outras rotas. Tudo bem, então o que fazemos é criar mais dois componentes. Uma é as pessoas a sua visão e outra é ouvir ou ver. Tudo bem. Então as pessoas coletivas em pessoa, singular. Então, dentro disso você pode ver as pessoas no roteiro. Posso importar os dados do Jason 100 C se conseguir isso. Então, o que faremos é ordenado. Uma revisão vai definir sobre rude, mas como o componente de pessoas para que possamos remover essas importações em Beacon mesmas pessoas conselho. Também é importante componente de pessoa em uma rota. Mas é o componente de pessoas tão componentes que eu sou para os touros e saída componente, mas cortar pessoa componente pessoa. Tudo bem, então componente de pessoas incidentes. Nós importamos os dados, então, uh, apenas tem ah, deck de direção pequeno. Eu guardo em. Se eu voltar, Ruethling vai pegar a lista de pessoas. Então esse é o componente de pessoas sendo renderizado. Então vamos ver se você consegue obter os dados para que eu possa criar minha própria vida. Segundo, olhe no interior montado. Então vamos ver o conteúdo dos dados direito até agora neste fim de semana são criados, mas isso podemos ver criado. Lembre-se, é um gancho de ciclo de vida que aprendemos nas palestras anteriores, em vez criado podemos pensar e vender ou registrar, e eu quero os dados de saída. Então, se eu salvá-lo e ir para o console, eu estou recebendo um array. Andre consiste em seis objetos. Isso é bom. Certo, agora temos os dados das pessoas chegando. Tudo bem, então agora temos as pessoas vindo mais tarde. Vamos criar uma div que diga “pessoa”. Então agora temos as pessoas chegando mais tarde. O que vamos fazer é, uh, vamos criar outro componente que diz perfil de pessoa. Você entende em um minuto por que estou criando esses três componentes. Então, por enquanto, o que nós Lewis componente pessoa interna, digamos, pessoa em por pessoa. Espere três ou quatro pés. Então, o que perdemos? Escolhemos o nome do ponto faz. Não era ter nome. Sim, ele tem um nome. Também escolheu a idade. Vamos fazer a empresa por e-mail. Um número de amigos. Tudo bem, então dentro disso. Então, digamos que esse componente de pessoa está esperando um problema. Oh, escute, é um tipo de objeto. É necessário? Sim, é necessário para que nós tivemos que prop como pessoa sabe o que podemos fazer é podemos ver que é uma pessoa de cabeçalho, não nomear sua idade, sua empresa, um e-mail. Tudo bem, então alguém querendo o que podemos fazer é criar. Podemos conseguir o dobro, já que os amigos contam. Então, para isso, o que podemos fazer é considerar amigos para a pessoa que eu completei. Posso criar uma propriedade de computador. Aquele cara faz a contagem de um amigo para mim em eu posso ver Prince Conde. Eu poderia ser feito. Esta pessoa não treinou Stotland. Tudo bem, então agora podemos usar este computador propriedade príncipe desaparecido em agosto. Nunca tenha o componente pessoa pronto em vez do componente de pessoas que eu possa importar. Ouça, pessoa, eu posso registrar o componente vendo componentes. Ouça. Tudo bem, então saiba o que podemos fazer isso. Podemos como o componente da pessoa em que podemos Podemos replicar o componente da pessoa usando antes da pessoa e as pessoas não estavam de fato. Sim, neste parto também pode ter índice. Ele também colocou a chave em direção a ele em seguida. Então avisou que Oscars não nos pegaria. Vamos também desistir. Dê a ele o valor do prob. Ouça, esta pessoa está bem? Então, se eu ver, isso eu deveria ver. Ok, então nós obtemos uma propriedade de edição ou melhor dados não é definido. Então, o que? Rigondeaux é Continuamos nossa própria propriedade de dados começou a virar caminho pode criar uma matriz que diz que as pessoas que eu conheço intelecto criado metal recon. Vê esta porta? As pessoas são iguais aos dados da porta e devem ficar bem aqui. Começa. Ouça. E as pessoas, faz muito mais sentido agora. E se eu guardá-lo Oh, nós temos muito mais jantares. Eso, o outro está na terra escura. Certo, então temos outro que diz que a pessoa drena Land não é uma função nele. De modo que este tipo de função para que possamos apenas dizer emprestar em nós deve estar bem. Sim, tudo bem. Se eu não tomei fresco, parece bom. Então estas são todas as pessoas que temos. Então o que eu quero fazer é nunca clicar em uma pessoa. Quero que esses dados entrem no componente do perfil da pessoa. Podemos ter o componente perfil de pessoa como sua própria página. Certo? Então está claro o componente do perfil da pessoa. Seria muito semelhante à pessoa, então você pode simplesmente copiar base o componente Uma pessoa, mas também terá mais algumas sensações extras. Por exemplo, é a seção sobre Vamos adicionar a seção do conselho no topo, então eu apenas fazer algum gênio e eu volto logo. Então, o que? Foi, eu adicionei mais alguns campos. Eu adicionei sobre eu também adicionei a lista de amigos. Então esse é um perfil de pessoa. Nada realmente extravagante. Então, o que você quer? Sabíamos que a pessoa era clicada, certo? Então também temos um botão que diz “Você perfil”. Eu sei o que vai perder para a pessoa chamada terá um. Também é ilha a centro para que possamos saber qual pessoa é e sempre terá alguma margem para a pessoa competente e agora ver perfil. Grã-Bretanha, dizemos que eu clique. É um ouvinte de eventos. Eu clico no seu perfil. Então temos um método, e por dentro é importante. O que queremos saber é esta porta. Mas ordem. Não armes um objecto. Hum, ele também teve uma pessoa fornecida sem notificar. Sabe, é fácil esquecer. Quem você está confiante para sair? Hum, então certifique-se de que você se lembra disso o quê? Poderíamos fazer uma coisa em vez de ter uma nova nota para a pessoa barra que você pode ver postada para encontrar o direito para que também possamos remover a pessoa competente daqui e você pode salvá-la dentro da pessoa quando clicamos em você. Perfil. Também tem que dar um nome em nós. Eu nomeio essa pessoa e queremos passar e os dados são isso. Está esperando um adereço que está fora do tipo de objeto. Seu nome é pessoa, então a pessoa de Madame é premiada com água. Nós vamos descendentes novamente estão ficando no contexto e para a pessoa que vamos enviar bm porta pessoa se eu salvá-lo. Então, uh, distrito tem sido o que está acontecendo? Então há este componente de pessoas dentro do qual estamos entrando na lista de pessoas em cada pessoa dentro do objeto de pessoas é olhos tendo seu próprio componente apenas para o sake renderização neste componente exibindo uma pequena quantidade de dados apenas como exemplo, fora de toda a lista que temos, como, você sabe, tradições do Facebook. Sabe, estes podem ser seus amigos, como, como, tão parecidos com que temos algumas sugestões sobre um clique importante neste componente. Estamos navegando na página do perfil da pessoa, que tem muito mais dados. Tudo bem, então nós o salvamos. E se eu voltar, temos a lista também, podemos fazer uma coisa em vez da lista de pessoas. Tudo bem, então essas são as pessoas que temos apenas um pouco fora do nosso estilo e enfraquecem como o perfil em que não estamos recebendo de fato. Então vamos ver o que está acontecendo lá dentro. Conserve o seu desaparecimento desaparecido pessoa necessária, certo? Então, qual é a razão? Então, em 10 opor e componente estamos enviando pessoalmente. Certo, então a razão pode ser que não definimos adereços como verdadeiros. Então também há algo que as pessoas esquecem normalmente como eu fiz se você voltar. E se eu disser isso, sim, agora está tudo bem. Aqui temos o nome da pessoa na idade dele. Acho que o nome dele de novo. Esta empresa. Acho que Andi irá abordar o número de uma lista de amigos com nomes diferentes também. Então, há um perfil de pessoa para que um pequeno exemplo e passeio. Então, uma coisa que eu quero tocar é que dentro do componente de pessoas, se você vê em vez de escrever este tribunal, o componente pessoa marcou como a pessoa da classe. É isso mesmo? Então eu poderia ter apenas discórdia corporativa. Eu também poderia ter devolvido em coisas como ter dois componentes separados. Eu também poderia ter voltado aqui e eu poderia ter adicionado o antes para este aqui. Mas a razão pela qual eu não fiz isso é que você sabe, este componente de pessoa está lá, certo? Então isso pode ser usado no futuro. Em mais páginas. Quero dizer, não no nosso projeto, mas só para o caso de você estar disposto. Um site maior. Certo. Então, se você está criando um site de mídia social, existem várias páginas onde você quer mostrar tipo de como um pequeno minuto de uma pessoa para fornecer. Então, para isso, se eu tenho um componente de rádio e se ele espera um certo tipo de dados, eu posso usá-lo em qualquer lugar onde ele é necessário em uma capacidade ele para cima e ele vai ser o mesmo, certo? Então essa é a razão pela qual eu criei um componente separado para a pessoa em se eu salvar isso e tudo deve ser tão grande quanto ele. Então é isso que é um exemplo na filha. Então eu sei que a filha é um assunto complexo, então é por isso que eu também pensei que eles eram exemplos muito mais práticos. Seria muito mais fácil de aprender. Então agora temos as pessoas competentes. Uma pessoa competente, pronta? E daí se eu quiser enviar a alguém um link de apenas uma pessoa. Digamos que eu queira mandar alguém traficando fantasias e casando se eu salvar seu perfil. Tem a página da casa dos Simpson, então quero compartilhar isso com um amigo. Então, se eu copiei isso e se eu abrir incógnito e baseado, eu não recebo nada. E se eu for para o console, é um desaparecido necessário trazer pessoa. Então a razão é que estamos recebendo os dados do componente people, que está sendo passado para o componente person no qual por sua vez passa para o componente de perfil de pessoa . Então, como faço para enviar a alguém um link de uma pessoa popular? Então é isso que vamos olhar para a próxima palestra como se fosse medicina e ver a próxima . 23. 23. encaminhamento dinâmico com exemplo: tudo bem nesta palestra para olhar sobre como criar espaço recorrente para pessoas específicas. Certo? Então o objetivo principal desta palestra é criar um Você é que pode ser compartilhado quando você está vamos clicar, eu vou obter os dados da casa Simpson. Vamos lá. Então a primeira coisa que precisamos fazer para isso é em vez de certificados para a parte da pessoa que podemos cortar coração e aqui estamos esperando outro perímetro, certo? Então, a pessoa paramilitares que eu vi. Então é isso que estamos esperando. E quando a personalidade é dinâmica, é quando você coloca o cólon antes dela. Então, se você vai ter qualquer parte dinâmica na U.R.L U.R.L , você vai ter um cólon na frente dele, então a pessoa de corte vai para a pessoa. Componente profundo e personalidade Colin irá para a pessoa I d. Tudo bem, Então, se eu pudesse dizer isso em e enquanto em vez de pessoas ou dentro do componente pessoa, o que podemos fazer é para clicar dentro do componente pessoa na vista perfil. Não precisamos mais do nome e dos perímetros. Nós não vamos enviá-los em vez disso o que nós vamos fazer é que nós também podemos remover esta variável de contexto em vez disso. Vamos navegar normalmente. Pode salvar o seu perfil. Eu sinto muito. Ouça, podemos ver a pessoa barra e além deste trabalho, você também pode nos enviar essa pessoa da porta, não eu d. Então, se você for para os dados Jason, para cada objeto de pessoa, nós tem algo chamado seu I d ou sua idéia sublinhado 80. Então, isto será enviado. Andi pode salvá-lo dentro de um componente de perfil de pessoa. O que podemos fazer é que não requer mais uma adequada para que possamos remover a seção de adereços aqui em Serik habitou a propriedade de dados componente. Uh, isso teria uma pessoa que eu d Andi, esta idéia pode ser recuperada através deste total permitido pontos batalhas pessoa ponto ponto i d. Então perímetros é o perímetro que vamos enviar. No nosso caso, é ah, personalidade no roteador. Então, dentro da pessoa competentemente em vendas pessoa cortar em qualquer dia este país, isso automaticamente se torna a polis 90. Então aqui podemos dizer pessoa 80. Então, para a maior parte, o que podemos fazer é começar comentarista boneca fora. Então, só para não termos outros. Nós também podemos ver comentário sobre e podemos dizer, montado no log do console do jogo. Pode fazer, embora tipo de clique em algo. Estou pegando a pessoa que preciso de luz. E se você pode ver na parte dos Urais, estamos recebendo o que você é específico e para essa pessoa em particular. Então, se eu vou compartilhar essa sua opinião com alguém, eu vou obter os mesmos dados, certo? Então não vai lançar muitos editores. Não vai dizer isso. Talvez adquirida porque não estão usando adereços. Então agora é nosso dever descobrir qual pessoa essa sociedade pertence. Excedentes de entrada, dados. Então o que podemos fazer é encontrar o índice das pessoas que têm o seu i d. e depois podemos acabar com a pessoa com esse índice, certo? Então vamos ao perfil da pessoa. Na verdade, isso não é muito complexo. Então o que podemos fazer é dentro montado, uh, nós também podemos ter este índice. Eu também poderia ter a pessoa porque isso é o que é necessário. Eu sei, em vez disso, as propriedades completas. O que podemos fazer isso você fica simples está no inferno. Dados feitos. Então aqui também precisamos importar o índice de dados identificados. Tudo bem, agora sendo para encontrar o índice de modo que podemos fazer é dizer para cada dia, papai, papai, e dentro que temos cada objeto tem um elemento no DNA. Podemos escrever na gripe aqui que dizem que seu objeto ou valores, e em vez disso, podemos passar elemento idiota no índice fora desta pessoa porta I d. Igualmente, acordo com Zito, então podemos ter a corrente b m explicável em William George Pessoa I d valores iguais porta porta porta. Então o que está acontecendo é que o dia morre outro direito? Então dentro para dizer que temos seis objetos. Então, para cada objeto, temos valor de chave de partícula. A Beth. Então o que estou fazendo é um restaurante destinado para cada objeto. Estou extraindo os valores do objeto das chaves. Então eu vou. Eu só vou conseguir esses valores em vez disso. As chaves apenas este valor. Então, para os valores que eu estou procurando 90 que foi enviado. Então, se o valor consiste na personalidade, então esse é o índice da pessoa. Então, agora o que podemos fazer é quando tivermos o índice, isto deve ser o próximo, certo? Então, quando temos o índice, o Robert concluído, eles serão automaticamente feito esta pessoa Propriedade será operado por dia despejado eo índice. Então, se eu incomum tudo isso e se eu salvar, Eu convido correr, tudo deve funcionar bem. Exceto que é o editor que diz o nome fora do Foco indefinido. A razão pela qual este aqui está vindo é por causa dos amigos que o Conde precisa ter a propriedade do computador que diz que se foi e que deveria ter feito esta porta. Ouça, seu amigo está assustado. Agora vamos refresco. Só vou ser vomitado que diz nome indefinido. Então, por que estamos pegando isso? Então, a razão pela qual eles podem estar recebendo isso é porque o modelo está sendo carregado em então que ele está sendo buscado, certo? Momento tão instantâneo que eu posso ver criado em espero que não deve obter isso nunca. Sim. Então, o que está acontecendo? Triste. Se você estiver usando montado, ele será executado após o modelo ter sido montado. Certo? Então, onde o modelo foi montado, ele procura ah propriedade cornice pessoa em pessoa E até este ponto de tempo durante a renderização não é assim. Nenhum de nenhum nome vai fazer outro. Mas se você diz Criador criado geralmente é feito antes das montanhas. Então, correndo criado antes que as montanhas estavam recebendo os dados, nós estamos enviando para a pessoa em exibi-lo, então levando a conhecer os outros. Então agora temos este link ligado novamente. Oi! Apreciado. Façam quem quiserem. Então, geralmente eu iria hospedar Toronto site de hospedagem gratuito como baías de fogo ou levantar-se e poderíamos moldar o link em. Podemos voltar. Podemos fazer isso por 80%. Legal, certo? Então é assim que você cria roteamento dinâmico em enorme é então agora você pode ter dinâmico você Wells. Então é isso para rotear. É isso por esta palestra que verei na próxima. 24. 24. Encontrar trabalhos e conclusão: Tudo bem. Agora, nos últimos minutos de enorme é agora vamos procurar lugares onde você pode encontrar emprego ou trabalhar por alguns dias. Mas então o primeiro lugar que você pode querer olhar como Angel Lord Coe. Então, o antigo Lord Coe é um site que se concentra principalmente em startups. Então, se você quiser trabalhar e começar, Angel, Lord Coe pode ser sua melhor cama. Então, antes de se candidatar a empregos, sugiro fortemente que construa esse relatório para você fora de projetos que seu livro não mostra ou mostre seu portfólio para o empregador para que ele ou ela possa ter a confiança de que você tem um som conhecimento em vista. Então você pode ir para Angel Lord Coe. Então, estas são todas as empresas no momento que estão procurando a beleza de Aleppo. Então, se você está procurando starups para trabalhar em Angel ou CO pode ser a sua melhor aposta. Mas se você quiser ir para qualquer coisa como freelancing, então você pode ir para o trabalho. Você pode criar um livro professor como ah, freelancer. Então você pode navegar os empregos que você pode contra você pode licitar para esses empregos e se você for contratado, então ter um portfólio normalmente ajuda em termos de trabalho, mas também ajuda em termos de freelancing, porque se alguém perguntar você, como que tipo de experiência você tem em anos futuros? Então você pode definitivamente dar-lhes o link do seu site para que eles possam saber Os detalhes são poucos e sobre os detalhes do projeto que você andou no palco e quanto mais conferência para você Então acima trabalho é que é um lugar fantástico com Brooke para financiamento de projectos. Você também pode procurar projetos de freelancing. Olhos de país dot com eso. O próximo lugar que você pode procurar é no estouro de pilha. Você pode encontrar os empregos e pilha oferta, bem como, assim pilha overflow dot com barra empregos, e você pode encontrar o Você pode encontrar empregos futuros onde você pode encontrar qualquer tipo de empregos que você pode estar procurando. Então a coisa com anjo e pilha overflow ou todos esses trabalhos é que você também pode encontrar mais empregos. Então, se você encontrar mais empregos, você pode trabalhar no conforto de sua casa, então mais um lugar para procurar Islington, Lincoln é quase o lugar mais óbvio para procurar. Então, se você tem um bom perfil no LinkedIn, então você pode começar colocando para fora conteúdo para que você possa construir credibilidade. Ou quando os recrutadores vão para o seu perfil para entender que você tem algum conhecimento sólido sobre o assunto em, eles podem facilmente ir para você em um faria. último lugar que você poderia procurar é a vista trabalhos ponto com. Então este tipo de trabalho oficial tem você Js. Assim, a maioria dos trabalhos aqui listados seria de todas as outras plataformas que vimos, como Anjo List freelance up livro Stack overflow. Mas é bom ter todos eles em um só lugar. Pode haver também como empresas que se concentram especificamente em ver empregos ou ponto com usuário. Então isso seria, eu acho que você está indo para um lugar para encontrar, você sabe, se você apenas empregos. Então, estes são alguns dos lugares que você pode procurar para obter algum trabalho em Beleza s. Então, espero que isso seja útil para você. Então é isso para este. Tchau tchau. Tudo bem. Parabéns por torná-lo o comprimento do curso. Então agora você sabe os fundamentos de você Jay está no seu rádio. Eles chamam qualquer projeto o primeiro orçamento que eu recomendo. Building é o seu próprio site. Você pode construir seu próprio site usando você Js Você pode me avisar se você tiver alguma dúvida sobre o curso que você pode escrever para mim no CHS vacatur e até mesmo no gmail dot com, O e-mail não é gritar. Você sempre pode ir para a documentação oficial do site. Se você não entendeu nada, eu já me sinto livre para entrar em contato comigo. Se você tiver alguma dúvida sobre o curso. Se você tiver alguma dúvida sobre beleza s ou se você está enfrentando problemas ao obter qualquer projeto, eu vou ajudar. Isso é tudo para este. Muito obrigado por assistir Bye bye bye.