O curso rápido do Vue JS (2.0)

1. Introdução: Todo mundo. E bem-vindos ao curso intensivo da vista JS. Eu sou Stephen, um desenvolvedor web freelance. E o mais importante para você, eu sou um professor. Eu estou tão animado para estar compartilhando este framework JavaScript fantástico com você agora um pouco em poucos Js vista é o que é faturado como uma estrutura reativa em seu próprio núcleo. Isso significa uma coisa quando você é JavaScript, os dados mudam tudo o resto que depende desses dados também muda, por exemplo, outros dados JavaScript, ou HTML, que depende dos dados JavaScript. Logo entenderá por que isso é tão poderoso em breve. E, claro, agora, deixe-me dar-lhe um exemplo do projeto do curso. É um candeeiro que foi modelado completamente em vistas. Eu sei que não é muito para olhar, mas estamos realmente nos concentrando em funcionalidade e JavaScript, especialmente neste curso. Portanto, o HTML e o CSS não são tão importantes neste caso, então você pode ver a lâmpada acesa e desligada. Altere a cor da luz apenas digitando uma cor em uma forma de caixa de entrada. Condene-o também, juntamente com um valor percentual ao lado do controle deslizante de escurecimento. Desde que eu sinto que é extremamente importante não só aprender conceitos, mas implementá-los direito como você aprendê-los. Isso é exatamente o que vamos fazer neste curso, será construir este modelo de uma lâmpada enquanto vamos no final do curso, você terá a ferramenta definida a fim de modelar seu próprio objeto do mundo real. E isso é o que o curso projeto isso você vai estar escolhendo um objeto com estado, por exemplo, um semáforo, que tem três estados. Tem um estado verde Biello estado e prisão ou outro, que tem uma tonelada de estados diferentes. Ah, alguns exemplos seriam. Tem um mestre dentro e fora do estado. Tem uma luz, que tem a sua própria independente em um estado desligado. Tem um valor de temperatura ou um estado de temperatura. Você poderia chamá-lo de que pode ser controlado por botões ou um botão. Eu quero que você seja muito criativo com isso, porque eu sei que você pode inventar algo realmente incrível e interessante. Assim, para este curso, seria benéfico ter uma compreensão básica de HTML CSS e, mais importante, JavaScript como vista é uma estrutura JavaScript. Mas não deixes que isso te assuste . Eu fiz cada conceito tão acessível quanto eu poderia ter. Dito isto, estou tão ansioso para ajudá-lo a entender os fundamentos de você, meu framework JavaScript favorito. Ansioso para vê-lo no curso. 2. Instalação e a instância de Vue: Bem-vindo a todos para a primeira palestra riel no curso de artesanato vista Js eu estou realmente animado para começar. Então nós vamos apenas saltar direto para ele com a instância View. Isso é algo que cada aplicativo de visualização individual precisa. Tem de estar lá dentro. Assim, a instância em si é mantida em uma variável JavaScript antiga regular. Nada extravagante sobre isso. Um, aplicativo é a maneira geral que as pessoas geralmente nomeiam sua instância de exibição, você não precisa, mas é prática padrão. Esta nova sintaxe de visualização aqui irá criar uma nova instância de você para que possamos realmente usar o framework. Esta não é uma sintaxe específica de visualização. No caso de você nunca ter visto isso antes. Isto é, Eu acredito que foi introduzido em JavaScript es seis a. Apenas um número de versão de javascript. Então, se você nunca viu isso antes, eu só quero que você saiba que ele não é um ponto de vista específico. Eu vou estar apontando a sintaxe que é vista específica ao longo do curso apenas para que você não se confunda. A única coisa que cada instância de visualização precisa é a propriedade L. Hum, isso na verdade aponta para o elemento HTML que todo o nosso código de visão lateral HTML será embrulhado em Normalmente vai ser uma div. Muito bem, vamos dar uma olhada nisso. O HTML Este é HTML muito básico para ver Se você vai notar o i d é igual aplicativo no diff Então tudo tem que ir dentro deste rígido todo o nosso código de visão. Por isso, corresponde a propriedade l dentada da nossa visão. Instância, se você vê aqui eu mostrei l é o aplicativo de sinal de número Isso é um seletor CSS. Então você poderia realmente fazer o seu fez ter uma classe de aplicativo e fazer ponto AP como o L e o JavaScript. Mas, novamente, esta é a prática padrão. Isso é o que você vê na documentação da exibição. Então, uma vez que você realmente os vinculou desta forma, o JavaScript no HTML, eu devo dizer que você pode começar a escrever o código específico de visualização dentro do seu HTML, que vamos chegar a na próxima palestra. Nesta palestra, eu também queria falar sobre caneta de código, a plataforma que vou usar para este curso. Então é um site fantástico para criar demonstrações rápidas, compartilhar seu código e, ah, a razão pela qual eu estou usando. É ótimo para ensinar. Então, a visualização não está na caneta de código automaticamente. Precisamos de um momento para incluí-lo. E eu só quero mencionar essa vista. Não são vistas mágicas de magia? Na verdade, apenas um arquivo JavaScript antigo normal. Eu não quero subestimar o quão complexo é e as pessoas realmente inteligentes que entraram em criá-lo. Mas tenha em mente que é apenas JavaScript qualquer um poderia visualizar corretamente. Embora não seja ninguém, você tem que ser muito inteligente para fazer isso. Mas é só um arquivo JS normal. Isso é o que eu quero atravessar. Podemos incluí-lo como qualquer outro arquivo JavaScript usando um script marcado com um S R C atributos. Então você verá que aqui apenas script, e eu puxei isso de uma rede de entrega de conteúdo. Há também outra maneira, segunda maneira de caneta de código específica para incluir recursos JavaScript externos. Faz basicamente a mesma coisa, mas mantém o nosso código um pouco mais organizado, por isso vou saltar para a caneta de código agora. Isto é o que Code pen parece, e nós vamos incluir view, então eu realmente vou a primeira maneira que você pode realmente apenas colar neste, uh, esta tag de script que eu tenho aqui e nós podemos ir para o console e digitar ele irá retornar algo que você não precisa se preocupar com o que isso realmente é Apenas o fato que ele retornou Algo significa que a visão foi incluída corretamente. Por exemplo, se tomarmos este script, tirar e, em seguida, digitar em vista, vamos obter uma vista não está definido. Portanto, se você quiser verificar se o uso corretamente incluído, você sempre pode acessar o tipo de console para ver as outras maneiras. Se você vai para este pouco causado ao lado do script Java a coisa Js na caneta código, ele vai pop esta janela aberta e você pode ver pesquisa, CD e Js. Então, se nós apenas digitarmos a vista, ele vai aparecer bem aqui. Clique em que Saving Close e bam! Está incluído o modo de exibição de redigitação. Recebemos a mesma coisa. Então isso é sobre isso para esta palestra que eu estou ansioso para ver na próxima onde nós vemos como e por que ver é tão mágico 3. A magia do vue (Data): Nesta palestra, vamos dar uma olhada rápida por que a visão é tão poderosa e é mágica. Vamos chegar a ele. Uma das razões é a propriedade de dados views. É disso que vamos falar nesta palestra. Você pode ver que eu tenho isso realçado em vermelho. Aqui de novo. É apenas uma propriedade antiga regular na instância view, então você pode ver que há uma vírgula após o L para se certificar que a exibição sabe que esses dois são entidades separadas. A propriedade view data toma um objeto como um valor que você pode ver nos dois pontos de dados e, em seguida as chaves, que denotam um objeto JavaScript. Ele detém pares de valor de propriedade, que atuam como tipo de variáveis de você. Você pode ver a propriedade desses pares de valor de propriedade é o nome da variável de aspas . Nesse caso, na leitura realçada, sua mensagem é o nome da propriedade, e o valor é o que você deseja manter dentro. Neste caso, é Olá mundo, uma corda que diz olá mundo. Então, graças a ver esses ar muito, muito mais poderoso do que variáveis JavaScript regulares, tudo bem, e tudo tem a ver com a atualização de HTML e reatividade de dados, sobre o qual falarei um pouco em um segundo. Uma licitação, Hmm? Realmente nunca foi tão fácil porque você tem o mesmo javascript que o último slide neste slide. E aqui está o HTML que realmente nos permite exibir o valor da propriedade message. Neste caso, o valor disso é olá mundo, certo? Eles coincidem com as duas chaves, nossa sintaxe específica vista. Tudo bem, isso é algo que a visão está procurando dentro do nosso ativo. Ele está procurando por essas chaves para dizer, OK, OK, o programa está se referindo a uma propriedade que A. Eu deveria pegar isso e transformá-lo em qualquer valor no nosso caso novamente, é “Olá mundo”. Então aqui está a sintaxe, a sintaxe HTML para incluir dados de visualização dentro de nosso HTML. Vamos pegar o nome da nossa propriedade de dados e colocá-lo dentro de chaves. Então vamos pular para a caneta de código e tentar isso. Vou colocar uma propriedade de dados de novo. Ele leva um objeto como um valor. Vamos dar a esse objeto uma propriedade está bem, mensagem e vamos colocar em Olá mundo. Vale a pena notar. Eu já incluí view nesta caneta de código. Você pode ver bem aqui. Eu incluí isso. E é por isso que as visualizações trabalhando para nós, podemos ir para o HTML Nós vamos fazer as duas chaves e nós vamos apertar mensagens automaticamente visualizações vai cuidar disso para nós e exibir Olá mundo no HTML. Como você pode ver lá agora, reatividade de dados é o que é tão emocionante sobre isso. Então, se descermos para o nosso cônsul enfraquecer tipo app mensagem ponto e isso realmente vai mostrar o que nossa instância de exibição, que é chamado APP, tem mantido como uma propriedade de mensagem em sua propriedade de dados, I Não, eu sou dizendo muito propriedade. Espero que você esteja seguindo agora. É aqui que entra a verdadeira magia. Se escrevermos mensagem de ponto app é igual e mudá-lo para igual a outra coisa. Vamos dizer mundo Olá, Apenas revertê-lo muito original. Eu sei, e entramos isso imediatamente. As alterações html anteriores aos frameworks reativos como view. Teríamos que escrever código extra para selecionar o elemento html e atualizá-lo com um novo valor. Mas a View cuida disso para nós nos bastidores, uma maneira muito, muito elegante, podemos mudá-lo para o que quisermos. Poderíamos mudar para aquela coisa estranha para a qual poderíamos mudar. Você sabe, um número igual. E ele será exibido, mesmo que seja um tipo de dados diferente em JavaScript. Poucos cuidam de tudo isso para nós. Então, espero que isso mostre um pouco sobre por que a visão é tão, tão incrível e poderosa. E vamos saber por que é ainda mais poderoso na próxima palestra. Ou falamos de algo chamado diretivas de visão ansiosas para vê-lo então. 4. Diretores v-se e bind: Bem-vindo de volta nesta palestra, vamos estar falando de diretivas vista e V Bind, um exemplo de uma diretiva vista. O que é exactamente uma directiva de opinião? São poucas sintaxe específica, não javascript baunilha, apenas algo para saber. Eles vão para onde os atributos html vão, e exemplos comuns de atributos HTML Air os atributos A treff em tags de link ou os atributos SRC em tags de imagem. Poucas diretivas sempre começam com V Dash como um prefixo, e você avalia o valor de uma diretiva como JavaScript todos entrar nisso um pouco mais uma vez que podemos ver algum código. Um exemplo simples de uma directiva vista é V. Se você olhar para a unidade de um script no canto inferior esquerdo da tela, você verá nada realmente novo para nós. É uma instância de visualização com atributos Anel e o objeto de dados. No entanto, desta vez temos uma propriedade mostrando em nosso objeto de dados que é definido como true o valor booleano . Verdadeiro em Javascript, isso não é uma string. É simplesmente verdade. Agora este HTML, podemos ver algo um pouco novo, e é ah, na segunda linha, você pode ver que temos RV traço. Se mostrar e para o segundo ponto neste slide view avaliando valores de diretivas JavaScript View vai procurar mostrar dentro de sua instância. Ok, onde está aparecendo? Ele vai encontrar a propriedade mostrando em nosso objeto de dados e dizer O que ele avalia muito bem, mostrando-nos definido apenas para o valor booleano. Verdadeiro. Então, é claro, ele vai avaliar para Troop, e o que VF realmente faz é mostrar ou esconder a div a que está ligado . Deixa-me mostrar-te isso na caneta de código. Então aqui está o Thievy. Se você pode ver o exemplo. Tenho o mesmo código que tínhamos no slide. Você pode ver os dados mostrando verdadeiro. Então vamos para o console e digite ponto do aplicativo mostrando e ver o que ele avalia para ele avalia como verdadeiro. Agora, se tomarmos aplicativo ponto mostrando e disse que igual a falso. Se você olhar para o topo aqui, certifique-se de assistir aqui em cima com o Agora que você me vê, vamos pressionar Enter e ele se foi, e isso é sem uma página. Atualize visualizações apenas fazendo isso nos bastidores. Então, se agirmos mostrando definido como verdadeiro, ele fará com que ele apareça novamente. É um exemplo muito, muito simples de uma diretiva de visão. Vamos passar para ver argumentos de diretiva e desmascarar poucas diretivas podem ter argumentos adicionando dois pontos após a diretiva. Nome e V Bind é um desses atributos. O que você tem sido faz é que ele nos permite vincular dinamicamente dados a um atributos HTML antigos regulares . Por exemplo, um link marca atributos de uma viagem. Se você der uma olhada neste JavaScript que eu tenho aqui, não é nada realmente novo. A única coisa que mudou é que em nosso objeto de dados, temos uma propriedade de seu L com o valor do hiperlink para o google dot com. Eu html. No entanto, veremos algo que é novo. Se você olhar para a segunda linha, podemos ver que temos uma tag A com uma diretiva V Bind que leva um argumento de uma viagem . Então v ligar Colon e, em seguida, o argumento. Neste caso, é um treff, e você pode ver o valor que está definido para você, Earl. Novamente, você vai olhar através de sua instância e dizer, OK, eu estou procurando por algo chamado U. R L ele encontra que no objeto de dados e vê seu valor é definido como google dot com para que ele volte para o HTML e diz, O que eu estou V vinculando isso para Qual é o argumento da minha diretiva V Bind? E é uma viagem. Então ele vai definir que um tags um treff para ser google dot com. E isso é realmente poderoso porque à medida que seu aplicativo progride, podemos realmente mudar em torno de que uma fuga de tráfego se assim escolhermos. Tenho a caneta de código aberta aqui com o mesmo código de novo, e podem ver que estão prontos para o Google Dot com. Vamos apenas confirmar que no console app dot Earl e é Google Dot com. Vamos ver o que acontece quando configuramos para outra coisa, diga bing dot com. Então dissemos isso para ser ponto com de novo. Não atualizamos a página. Se clicarmos no link, ele vai nos enviar para bing dot com. Isso é muito, muito poderoso de novo. Se definirmos o URL do aplicativo de volta para google dot com, você tem que digitar esse https, é claro, porque caso contrário, os anos 80 não vão carregá-lo corretamente. Vai para o Google e isso é tão poderoso. Você pode fazer isso com a propriedade de tesauro de uma imagem e carregar em uma imagem diferente com base na preferência de um usuário ou mesmo no perfil de um usuário. Isso é muito, muito poderoso, e estou feliz por ter mostrado isso a vocês. Junte-se a mim na próxima palestra, onde vamos falar sobre algo chamado Lista renderização CNN. 5. Lista de renderização e v-for: Bem-vindos de volta a esta palestra, vamos falar sobre renderização de listas e a diretriz V 4. Outra directiva em vista. Eu só queria dar uma atualização rápida em JavaScript um aumento no caso de eles totalmente escaparam de sua mente ou você não os usou para monitorar ou o que quer que seja. Vai gerar uma coleção de dados que o Reagan tem qualquer número, cordas, objetos, objetos, até outras matrizes. E poderia ser uma mistura de qualquer um daqueles normalmente destinados a manter dados que serão posteriormente iterados sobre, por exemplo, usando um loop for. Todos vocês já viram que quatro. I é igual a zero iess menos que um comprimento de ponto de raio I plus. E então você pode olhar para cada item nessa matriz. E este é apenas um exemplo de um monte de matrizes. Temos nossa matriz de sons. Nossos números são uma e, uh, uma matriz de valores mistos. Agora, um aumento em vista. Ter um re presente é realmente um simples como inclui-lo como o valor de uma propriedade dentro nosso objeto de dados. Então você pode olhar para o JavaScript aqui novamente. Nada realmente novo, exceto que temos nossos sons, propriedade e seu valor definido como em um direito, e é realmente essa corrida vista simples assim Fácil o suficiente, certo? Então lista de renderização e a diretiva V quatro. Este é o lugar onde as listas ficam realmente, realmente interessantes e super poderosas em vista. Usando a diretiva V 4, podemos facilmente loop através de uma matriz, e ele também funciona em objetos não foram olhar para isso. Mas saiba que ele também funciona em objetos e podemos renderizar html para cada pedaço de dados . Aqui está o JavaScript. Isso foi no último slide. E aqui está o HTML. Agora, isso pode parecer um pouco confuso, então vamos aprofundar um pouco mais no próximo slide. Este é o mesmo JavaScript em HTML que eu tinha no slide anterior. E vamos dar uma olhada nisso. Então nós temos nossa diretiva denotada pelo traço V Dash D para o nome da matriz no objeto de dados vai ser depois disso na palavra-chave, e esta é uma variável temporária, ou alias, que mantém o elemento matriz atual. É importante notar que esta não precisa ser a versão singular do nosso nome de matriz isto é apenas convenção. Se você já trabalhou em Python, isso será muito, muito familiar para você se não tiver trabalhado. No entanto, isso em sintaxe é uma espécie de visão específica. É meio que em JavaScript agora. De qualquer forma, eu não vou entrar nisso. Mas se você olhar para ele, faz sentido. Ele vai dizer que vai renderizar uma div para cada som que está na matriz de sons. Então ele vai renderizar quatro no nosso caso com boom bap palmas e ca bam e você pode ver aqui embaixo nós temos as chaves, as duas chaves que nos permitem digitar, ver código dentro do nosso HTML. Vamos pular para a caneta de código e vamos dar uma olhada nela em ação. Eu tenho o mesmo javascript que tivemos nos slides, e eu tenho um modelo HTML vazio e nós vamos realmente digitar nossa diretiva antes. Então V 4 equivale a som em sons, e então vamos fazer o som de duas chaves. E se você olhar para o HTML, ele vai realmente renderizar cada item de matriz que tínhamos dentro do HTML. E se abrirmos nosso inspetor e olharmos para ele. Você pode ver que cada um destes é um indivíduo def boom BAP palmas e ca bam! E você pode entender por que isso pode ser tão poderoso em muitas situações. Ah, exemplo muito clássico desses frameworks reativos é criar uma lista de tarefas para que você possa ter tudo isso para fazer dados armazenados em seu javascript. E então ele pode renderizar isso usando apenas isso aqui, apenas três linhas em vez de ter que acessar cada uma individualmente ou fazer loop sobre os dados dentro do JavaScript, a fim de renderizar, uh, coisas para o dom. De qualquer forma, é muito, muito poderoso. Não é algo que vamos estar olhando para, uh, uh, criando nossa lâmpada. Eu só queria apresentá-lo muito rapidamente porque é um conceito poderoso que realmente vale a pena conhecer. E você poderia usar totalmente em seu próprio projeto também. Tudo bem para você na próxima palestra 6. HTML e CSS para nossa lâmpada: Bem-vindos de volta, pessoal. Estou tão animado com isso, Lecter, porque finalmente vamos começar a construir nosso projeto de amostra. Nosso abajur. Agora, esta palestra vai ser completamente HTML e CSS. Sem javascript, sem visualização. Isso significa que se você não se importa com o CSS ou não estiver preocupado com a estrutura do HTML, você pode ignorá-lo. Vai ser bem simples. Então, se você já está familiarizado com esses conceitos, não é grande coisa. Você só vai ver o que eu fiz nas próximas palestras. E sim, é só isso. Agora, eu recomendo fortemente que você vá até Code Penda, Ohio, e crie por conta e código junto comigo. Eu vou mencionar isso em, ah, ah, muitas palestras para ter certeza que você está programando, porque eu realmente acho que essa é a melhor maneira de os alunos aprenderem a codificar junto com o que eu estou fazendo. E mesmo depois de os eleitores se meterem com os conceitos que aprenderam solidificá-los no cérebro. Eu também vou incluir um link para uma coleção de caneta de código no curso em algum lugar que contém o código-fonte para cada palestra, só para que você possa revisá-lo. Por favor, não entre e copie Colar, isso embora eu realmente, realmente sinto fortemente que é importante codificar junto com o que eu estou fazendo. Tudo bem, vamos a isso. Então vamos para o nosso HTML e criar um div com uma classe de lâmpada. Agora vamos para o C S e selecionar a lâmpada Div e dar-lhe uma posição de absoluta . Vamos dar-lhe um topo de 50 pixels e uma esquerda de 50 pixels. Eu não vou me preocupar muito com design responsivo para isso, como é apenas uma demonstração novamente foram realmente mawr focado na funcionalidade, em vez de como ele parece e quão bonito é. Agora eu vou criar uma div dentro da lâmpada com uma classe de sombra, e nós vamos selecionar essa classe de sombra e dar-lhe uma posição de absoluta. Já que isto é um filho da lâmpada, Def, vai ser posicionado de acordo com a lâmpada tive, não com o documento inteiro como a lâmpada, Davis. Então vamos dar isso oops desculpe com cada recebe um cheiro de 70 pixels se eu puder digitar e uma altura de 50 pixels e uma cor de fundo de biscoito. Eu não fiz. Pesquisei isso no Google. Eu não sabia que era a cor CSS antes de eu realmente fazer este curso. Tudo bem. Agora vamos criar um baseado se um div com uma classe de base, isso vai ser fora da classe sombra. Vai ser um irmão, devo dizer da aula de sombra. Então vamos selecionar são classe baseada ou que são baseados. Se eu deveria dizer no CSS, nós também vamos dar a isso uma posição de absolutos. Vamos dar-lhe uma largura de 10 pixels. Vamos dar-lhe uma altura de 70 pixels. Não muito largo, muito fino e longo esquerdo de 30 pixels e um topo de 50 pixels. Não estou só puxando isso do nada. Eu já fiz isso só para que possamos acelerar as coisas indo para dar-lhe uma cor marrom. Agora, o que está acontecendo aqui? Algo ruim. Oh, eu coloquei isso fora da ponta da lâmpada. Espero que tenhas apanhado isso. Então vamos colocar uma vez enfiar lá dentro, e agora parece um abajur. Você pode ver na pré-visualização tudo agora, nós vamos criar uma classe de luz, na verdade, dentro da sombra, uma luz, desafiar, continue dizendo como classe e que nós vamos colocar apenas sob aqui para manter nosso CSS organizado. Então isso vai viver dentro da nossa sombra, Diz. E sua posição será absoluta. O que significa que vai ser posicionado de acordo com o pai, que é a sombra Div. Agora vamos dar-lhe uma largura de 100% não pixels por cento e uma altura de 100%. E isso vai fazer com que os mesmos tamanhos são sombra. Então, se mudarmos, estamos dentro das dimensões de altura aqui em cima, o mundo de largura e altura se adaptam a isso. E agora vamos dar-lhe uma cor de fundo de você, e isso vai realmente iluminá-lo. E isso vai ser nossas lâmpadas no estado, que nas próximas palestras vão manipular com JavaScript para que quando clicarmos , ele , possa ligar e desligar. Então isso é sobre isso para o HTML e CSS Hope que foi parte esclarecedora no trocadilho lâmpada. E verei você na próxima palestra 7. Métodos e vde: Bem-vinda de volta. Mais uma vez, nós realmente vamos entrar na carne de vocês com esta palestra com métodos de visão e o V sobre diretiva. Agora o que? Nossos métodos de visão, eles são muito importantes para ver. Então vamos descobrir métodos ar mantido em um objeto como uma propriedade de nossa instância vista Exatamente como nosso objeto de dados e você vai ver o que eu quero dizer. Em um segundo, vez de coisas como strings ou matrizes, que é o que nosso objeto de dados detém, nossos métodos objeto irá conter funções que você pode ver neste JavaScript. Eu tenho uma instância de visualização bastante padrão, nós temos nossos dados LR, e agora temos uma nova propriedade chamada métodos. Vale a pena apontar isso. Portanto, lembre-se de nossas instâncias de visualização, apenas um grande objeto JavaScript. Então precisamos dessa vírgula após a chave de fechamento de dados porque é apenas um monte de propriedades como em qualquer outro objeto JavaScript sem que vírgula não será executado. Então é algo que às vezes esqueço. Achei que valia a pena mencionar. Se você olhar para a propriedade methods, ele contém um objeto. E nesse objeto vemos que temos uma propriedade que é chamada hello world, e essa propriedade tem um valor de apenas uma função, e nessa função ele executa um alerta chamado Hello World. Esta é uma coisa de início de script Java bastante padrão. Então pensei que tinha me adaptado para ver. Agora, como vamos interagir com este método em nosso HTML? E é aí que entra o V de directiva. A diretriz Viane leva um argumento exatamente como V bine faz com o cólon. Ele nos permite realmente definir ouvintes de eventos em elementos HTML de uma maneira muito simples, e muitas vezes o argumento da diretiva Viane será clicado. Nem sempre, mas você verá isso com muita frequência, e o valor da diretiva é quase sempre um método que declaramos em nossa opinião. , por exemplo, o método hello world que vimos no slide anterior. Aqui está um pouco de HTML. Bastante simples. Você pode ver que temos R V no clique de dois pontos. Então, refresque de novo. O V em é a directiva Colon e depois do cólon é o argumento directivas. Neste caso, é clique. Então o que esse código faria é quando clicarmos no botão, ele realmente vai rodar esse cara aqui. O “Hello World “, “, propriedade, que é uma função. Ele vai executar esta função, e ele vai alertar Olá, mundo no navegador. Agora vamos dar uma olhada na caneta de código e como podemos usar isso em nossa lâmpada. Então vamos até a lâmpada e vamos adicionar um V na diretiva e com um clique, e vamos fazer referência a algo que realmente não existe no script Java ainda. E vamos chamá-lo de alternância. Então isso tem que ser você pode ver aqui em baixo, ele vai gritar comigo dizendo que o botão não existe e vai se livrar disso. Mas está tudo bem por enquanto. Não, lembre-se, lembre-se, vamos adicionar isso em comum. Nós vamos descer para o JavaScript, e nós vamos adicionar uma propriedade methods, e ele vai conter um objeto JavaScript, certo? E vamos adicionar alternância, que é o que precisamos adicionar. Para que isso comece a renderizar corretamente novamente, e o valor de toggle será igual a uma função. E vamos simplesmente consolar um registro de pensamento. Nós só vamos colocar, hum, lâmpada clicada. Digamos que com um ponto de exclamação, porque estamos entusiasmados, eu vou esclarecer este conselho, então você não precisa olhar para isso agora antes mesmo de clicarmos na lâmpada. Vamos testar o método. Lembre-se, poderíamos acessar as propriedades de dados do nosso aplicativo, nosso aplicativo de visualização digitando app dot e o nome da propriedade de dados. Vamos ver se isso funciona com nossos métodos também. Então vamos digitar apenas ap ponto rebocador, e isso vai retornar uma função. E é isso que queremos que aconteça. Queríamos retornar a função. Agora vamos ver o que acontece se realmente corrermos. Apt para cima, alternar. Vai acender a lâmpada de diálogo do conselho, então tudo está funcionando fantasticamente muito bem. E agora vamos tentar clicar na lâmpada. Lembre-se, este é Thievy em Click Directive trabalhando para nós, e boom! Vai executar essa função. Agora, isso é algo que é tão poderoso e excitante antes dessas estruturas reativas, você teria que entrar. Você tem que selecionar o elemento HTML real. Você teria que adicionar um ouvinte de eventos a ele. Você teria que adicionar uma função a isso e só que era muito mais complicado do que isso com vista. É tão simples de fazer isso e tão fácil de manter e apenas uma coisa realmente emocionante. Este é um marco legal. Eu realmente encorajo você a mexer com isso. Se você quiser mudar o que diz, tente, você sabe, adicionar algum código extra à nossa função de alternância. Brincando com isso, vendo o que você pode inventar. Não tenha medo. Você não vai quebrar nada, então apenas experimente. Então é sobre isso para esta palestra, eu vou te ver na próxima. 8. Estado da lâmpada: Bem-vindo de volta nesta palestra, vamos adicionar estado básico à nossa lâmpada usando a propriedade de dados. E vamos usar a diretriz de um par de palestras atrás, se você se lembrar, se você não lembrar, tudo bem. Você vai se lembrar disso enquanto formos. Tudo bem, vamos para o nosso script Java, e vamos adicionar uma nova propriedade aos nossos dados, que será chamado. Então, isso vai controlar o estado ligado da nossa lâmpada que vai padrão para falso para que o usuário pode ligar a lâmpada uma vez que eles começam. Certo, então agora como interagimos com isso na propriedade? Bem, podemos sempre fazer dados de pontos de aplicativos. Nosso arrependimento no ponto On é igual a através e mudá-lo para isso. Mas como podemos realmente fazer isso dentro de um método? Então vamos usar nossa conversa, lamentamos que vamos limpar o registro de pontos do cônsul, e vamos fazer referência com a palavra-chave isso. Agora, isso é uma coisa muito confusa em javascript. Sempre foi. Não vou tentar explicar isso aqui. Existem alguns artigos fantásticos que vão sobre como lidar com isso e o que realmente significa. Basicamente, em diferentes contextos, significa coisas diferentes. No entanto, neste caso, vamos simplificar e apenas dizer que isso se refere à instância view. Ok, então se nós digitar este ponto em sua indo para acessar este na propriedade nos dados, se nós digitar este ponto alternar, ele vai fazer referência ao método. Então isso é outra coisa. Não dê o mesmo nome aos seus métodos e dados. Você terá problemas, mas ainda assim para nossos propósitos, este ponto se refere ao interior de nossa propriedade de dados. Este ponto qualquer apenas se refere a algo dentro do seu código de visualização para que você possa chamar outras funções de dentro desta função digitando este ponto o nome da função. De qualquer forma, vamos definir este início para igual Não desculpe, não este estoque em novamente, Algo confuso se você nunca viu antes, JavaScript realmente avalia código do dedo direito do pé esquerdo. Então, basicamente, o que vai acontecer é que ele vai dizer OK, o que este ponto é feito neste falso? Este não este ponto de exclamação vai inverter o que este cão avaliar neste caso, este início avalia como falso, por isso vai invertê-lo para verdadeiro. E então ele vai realmente definir este ponto para ser igual a true. Espero que isso faça sentido. É básico, se não perceberes, está tudo bem. Isso é basicamente como você alternar um verdadeiro valor falso e JavaScript, isso é tudo que você precisa saber. Então, agora vamos dar uma olhada no consulado. O que está acontecendo? Então este aplicativo ponto em é igual a false. Agora vamos correr em ponto alternar tudo bem, e vamos ver o que agir fora em é igual a agora. são maléficas tropassão maléficas. Então isso está funcionando perfeitamente. E agora, se clicarmos na lâmpada, se fizermos apt on clique na lâmpada e fazer apt para fora novamente falso, assim que clicar na lâmpada também executa o nosso método. Ainda estamos bem para isso. Agora vamos fazer com que nossas lanternas sejam ligadas e desligadas. Quão excitante é isso? Estou tão entusiasmado com a razão de termos feito uma classe separada de Dave separado, devo dizer, pois nossa luz é para que possamos usar a diretiva V se e vamos simplesmente colocar V se tudo bem. É realmente, honestamente assim tão simples. E você pode ver que nossa lâmpada desligou, por assim dizer, o Div amarelo que a cor amarela fez com a classe de luz desapareceu. Graças à vista dizendo OK, não é honesto está definido como falso. E agora quando clicamos para alterná-lo, Momento da verdade Bam, ele liga. Isso é tão legal. Quão legal é isso? Estou ficando animado com isso. E eu sabia o que ia acontecer. Então vamos passar por essa cadeia de eventos mais uma vez. Nós estamos clicando na lâmpada e que, graças ao RV no clique, ele vai clicar nele, e ele vai olhar para a vista eu devo dizer que vai olhar para o método de alternância. Ele vai passar por aqui e dizer, OK, OK, o método de alternância é definido para uma função que basicamente inverte a propriedade on em nossos dados, ele o transforma de falso para verdadeiro ou verdadeiro para falso. Ok, isso acontece. E então vista diz, Oh, OK, esta diretiva, este V Se diretiva está dizendo ok se on é verdade, eu quero exibir isso. No entanto, se em sua falsa. Não quero mais exibir isso. Isso como Div, que é definido para uma cor de amarelo em nosso CSS. Você pode ver aqui cor de fundo, amarelo, e isso é basicamente o que está acontecendo. Essa é a cadeia de eventos lá. Estou entusiasmado por termos isto a funcionar muito, muito fixe. E estou entusiasmado por estarmos a começar a fazer coisas. Eu queria fazer as coisas o mais rápido possível, então te vejo na próxima palestra. 9. A diretiva de modelo v: Bem-vindos de volta, pessoal. Nesta palestra, vamos falar de uma nova diretriz chamada Modelo V. Muito excitante, muito poderoso. E vai ser divertido. Então, como usamos o modelo? Bem, é usado para ligação de dados bidirecional, que é o que a vista docks Js chama. Assim, para uma ligação de dados em elementos HTML que permitem a entrada do usuário, por exemplo, entradas de texto. Eles também podem ser usados em qualquer coisa que a tag de entrada pode manipular em HTML. Caixas de seleção , botões de rádio , botões de rádio, controles deslizantes, suspensos, todas essas coisas boas. Então, quando as alterações de dados em um elemento HTML que tem uma diretiva de modelo V, ele atualiza a propriedade de dados que está vinculado dentro da instância de exibição e vice-versa. Se eu alterar os dados no elemento HTML, ele irá atualizar automaticamente a propriedade associada na instância view. E se eu alterar a instância de exibição, propriedade dentro do JavaScript atualizará automaticamente o HTML. É um conceito muito poderoso, e estou muito animada para mostrar a vocês como funciona. Agora você verá alguns JavaScript aqui, vista bastante padrão. Instância, temos uma propriedade chamada Color dentro de nosso objeto de dados e seu valor é roxo. E se olharmos para o nosso HTML, vocês podem ver que temos algo que um pequeno modelo Nuvi Dash é igual a cor. E eu quero lembrá-los que a visão vê qualquer coisa qualquer valor fora de uma diretiva e procura por esse valor dentro do JavaScript. Então essa cor não é a visão de cor corda está vendo que v Dash e dizendo, OK, esta é uma diretiva. Vou avaliar o que quer que seja igual e tentar encontrá-lo dentro da minha visão. Instância, apenas uma atualização rápida sobre isso. Ok, nós pulamos para a caneta de código, e agora vamos implementar uma diretiva de modelo V em uma caixa de entrada de texto que nos permitirá mudar a cor da nossa lâmpada, que é muito legal. Agora, não vamos implementar a mudança de cor ainda. Isso será na próxima palestra, onde eu falo sobre alguns outros conceitos que nos permitirão fazer isso. No entanto, vamos apenas colocar o modelo em funcionamento neste. Então eu vou adicionar uma entrada com um tipo de texto fora desta lâmpada, def. No entanto ainda dentro do nosso ativo, isso é muito importante caso contrário ter usado não vai vê-lo corretamente. Então, adicionamos uma diretiva de modelo de RV e chamaremos essa nova cor de propriedade, como fizemos nos slides. Agora você verá um erro de objeto aqui embaixo. Isso é OK. É só porque a vista não é capaz de encontrar a propriedade da cor porque ainda não o fizemos. Então vamos em frente e fazer isso na nossa vírgula. Lembre-se, é um objeto que precisamos dessas vírgulas e vamos adicionar em roxo. E agora você pode ver aqui em cima. Temos roxo automaticamente preenchido. Você pode ver aqui em cima. Nem sequer diz nada certo. Não há nada. Não há nenhum texto de espaço reservado, nada associado a ele. Veja isto. Essa é a parte legal. Então, se nós apt out colorido lembrar, podemos acessar qualquer propriedade dentro do nosso objeto de dados fazendo aplicativo ou o nome da nossa visão. Instância. Neste caso, é app, app dot qualquer que seja o nome da propriedade. Neste caso, é cor roxa. Agora, se eu digitar laranja aqui e lembrar, isso não foi atualizado ou algo assim, tudo isso está acontecendo ao vivo em tempo real laranja. Quão legal é isso? Imediatamente é tomado o texto que os usuários colocaram e o alterou no script Java. Isso é incrivelmente poderoso. E você pode ver que funciona da mesma maneira. Se eu no JavaScript Se eu digitar laranja vermelho aqui ap ponto cor lá em cima automaticamente, ele muda. Assista de novo. Assista novamente no topo. Enquanto eu fizer isso, vou mudar para azul. Agora veja novamente no topo aqui imediatamente. Ele muda. Isso é tão, tão legal. Esta é uma das coisas mais legais sobre vista para mim. Pessoalmente, eu só amo isso para trás e para frente entre o HTML e Js. É tão elegante e tão fácil de usar. Ok, na próxima palestra, nós vamos realmente fazer isso ter um efeito agora mesmo onde nossas lâmpadas ainda estão amarelas? Porque isso é o que o CSS está ditando aqui no próximo estavam realmente indo para comprar V. E se você se lembra de uma xícara de eleitores atrás, a fim de mudar a cor da lâmpada vê-lo , então 10. Adição de cores reativo!: Bem-vindos de volta, todos nesta palestra, vamos levar a nossa propriedade de cor dentro da nossa visão. Instância que é V modelado para nossa entrada de texto. E vamos fazer com que esse valor mude a cor do nosso comprimento que temos aqui na tela. Agora vale a pena notar que, uh, eu adicionei algum texto de sabor aqui desde a última palestra que apenas pede ao usuário para inserir uma cor CSS válida. E tem que ser uma cor CSS válida. Se digitarmos algo tagarelice ou números ou o que for, não vai mostrar Teoh corretamente. Será apenas padrão para um amarelo, então não vai quebrar nada. No entanto, se você quiser uma maneira mais propensa a erros de fazer isso, boa maneira seria uma entrada seletiva e, você sabe, como um drop down. E eu não vou entrar nisso aqui. Mas a documentação vista como eles têm docas fantásticas. É outra razão pela qual é um dos meus frameworks favoritos em JavaScript. A documentação deles é simplesmente incrível. Mas se você for para a documentação do modelo V, ele tem uma seção inteira sobre entradas selecionadas. Drop down entradas. Vamos começar a inclui-lo aqui, entanto, vamos começar a usar o modelo para mudar a cor. Agora vamos ter um minuto para pensar sobre como mudar a cor disso enquanto poderíamos ir para o CSS e apenas mudá-lo manualmente nós mesmos, e isso funcionaria certo? Está roxo agora, mas o JavaScript não tem como tocar em um arquivo CSS. De qualquer forma, não é assim. Então, como fazemos isso? Como fazemos com que o HTML altere o estilo? Bem, tenho certeza que você já viu isso antes. É os atributos de estilo no elemento HTML. E para fazer isso, nós apenas digitamos em algum plano de fundo do código CSS. A cor é roxa e você pode ver que mudou. Fizemo-lo de modo que é roxo. No entanto, queremos ser capazes de mudar isso com vista, certo? E nós não podemos apenas digitar, você sabe, dobrar Curley e depois cor, porque a visão não pode olhar dentro de atributos, certo? Esta é apenas uma força que você não poderia saber que era suposto olhar dentro de lá para Teoh discernir qual a cor deveria ser. Então, o que vimos anteriormente que nos permite mudar? Atributos HTML usando dados de exibição. Isso é certo. É a ligação. Ok, então nós estamos realmente indo para se livrar deste e digite em v ligação. Lembre-se, esses são os nossos atributos. Essa é a nossa, Ah, nossa diretriz, eu diria. E depois do cólon, esse é o nosso argumento para uma diretriz. Estilo de ligação V é igual a ok, e o que isso vai levar, não podemos apenas digitar em segundo plano. A cor é roxa porque é código CSS, certo? Há um monte de coisas erradas com isso, mas esse código CSS. Então, como é que a vista lida com Então o estilo V? Bem, é preciso um objeto JavaScript. Certo, e essas são as duas chaves. Agora ele leva isso, e basicamente é apenas uma lista de propriedades CSS. Então, por exemplo, cor de fundo. Lembre-se, você não pode usar traços em JavaScript, então é plano de fundo com uma cor de fundo com um C maiúsculo na cor. E se você já editou estilo usando JavaScript nativo, apenas JavaScript baunilha, devo dizer que isso é muito semelhante. Não deve haver nada de novo para você, Colon e claro, porque é ah objeto que é nossa propriedade ou Kias, fundo, cor e nosso valor. Temos que usar aspas simples aqui porque se usarmos aspas duplas ele realmente vai nos escapar desta sequência. Mas nós temos que usar aspas simples porque lembre-se, nós não podemos apenas digitar roxo porque então isso é o JavaScript vai olhar para as instâncias de exibição , em vez disso, vai procurar a propriedade de roxo, e isso Não existe, certo? Então, se colocarmos uma corda aqui como roxa, você vai ver bam, ele muda. Isso é incrível, certo? Isso é muito, muito legal. Ok? E muito, muito poderoso. Mas não queremos que isto seja apenas uma força estática. E aqui é onde tudo se junta. Este é um momento tão emocionante no curso. Vamos nos livrar disso e vamos simplesmente digitar cor. E lembre-se, sempre que view tem uma diretiva, ele vai ver o valor da diretiva como JavaScript. Certo? E ele vai procurar por esta propriedade de cor dentro de si mesmo e ele vai encontrá-lo em nosso objeto de dados, que é igual a roxo Ok. E agora clicamos e está roxo. E veja isso. Isso é, tipo, tão incrível. Estamos combinando coisas, e é excitante. Então nos livramos do roxo e o padrão é amarelo, lembre-se, porque em nosso CSS. Temos os antecedentes. A cor é amarela. Nós digitamos laranja. Olhe para isso. Automaticamente. Ele muda. Isso é tão excitante. É tão excitante. Rosa, uh, azul verde. Incrível. E apenas toe mostrar que ele funciona, enfraquecer o tipo na cor do ponto do aplicativo é igual a amarelo ou não vamos fazer amarelo. Esse é o padrão, um, laranja de novo e muda. Uau. Quão incrível é isso? Isso é tão, tão legal. E você vê todos os tipos de bobagem que ele vai ficar. É laranja tipo de números que vai ficar é amarelo. Mas quão incrivelmente poderoso é isso? Estamos combinando apenas duas coisas simples e nós nem temos, você sabe, nós temos menos de 30. Talvez você aprenda 25 linhas de código aqui, e tudo isso está funcionando assim. É só a mente soprando. Como a visão é poderosa em um momento como este. E eu estou tão animado para chegar a este momento no curso. Ok, isso é tudo para esta palestra. Vejo-te no próximo. 11. Dimming na nossa lâmpada: Tudo bem, bem-vindo de volta. Então, estamos ouvindo a caneta de código, e vamos adicionar um controle deslizante fraco à nossa lâmpada que nos permite escurecer e iluminar a cor real de qualquer cor que escolhemos para configurá-la. Agora, isso vai ser usando conceitos que já exploramos. Isto não é nada novo. 100% disso é o que já vimos. Salve para um tipo diferente de entrada HTML. Agora, se você quiser experimentar isso você mesmo, eu o encorajo a fazer isso porque é como um exercício de quebra-cabeça, certo? É muito divertido tentar descobrir essas coisas de qualquer maneira. É divertido para mim. Obviamente, completamente opcional. Você poderia apenas seguir enquanto eu estou fazendo isso. Eu vou dar-lhe uma dica para aqueles de vocês que querem experimentá-lo por conta própria será usando na entrada html atributo de entrada com um tipo de intervalo. Vai ser um controle deslizante. Ok, vamos pular para isso. Vou começar com o roteiro do trabalho desta vez. Vamos adicionar uma nova propriedade ao nosso objeto de dados chamado brilho. Certo, vamos definir isso igual. A única nota que este é o número um, o nó inteiro um, a corda um como você veria lá. Está bem, Um. E é importante que este seja um. Porque isto é o que vai controlar a nossa luz, dibs, opacidade tal como, desistir aqui que, na verdade, quando clicarmos aparece, certo, então isso vai controlar o opacidade e opacidade. Em CSS é um valor entre zero e um, com 0,5 sendo o ponto médio. Em CSS é um valor entre zero e um, Ok, então é importante que este seja um. Começa, venceu. Ele pode começar o que você quiser, mas tem que ser um valor, mas entre zero e um, assim como o estilo de opacidade no CSS. Ok, antes desta entrada de texto, vamos adicionar outra entrada com o tipo de intervalo. E aqui estão alguns atributos que são, uh, que você normalmente incluiria em uma entrada de intervalo. Vamos ter um homem, que vai ser o valor mínimo. Teremos um máximo significaria o valor máximo. Tal como falamos tem de ser entre zero e um. Nós vamos adicionar este passo atributos ou está definido como 0.1 Se você nunca viu isso antes, ele controla a distância que as etapas estão neste controle deslizante. Deixa-me mostrar-te. Então, se definirmos o passo para 0.5, que é o nosso ponto de meio caminho, você pode ver quando eu arrastei isso, ele automaticamente salta no meio do caminho. Agora queremos ser 0,1 porque vai nos permitir ter um bom movimento suave e uma boa mudança de brilho suave à medida que avançamos. Tudo bem, vamos adicionar uma visão mágica com o modelo V. Já vimos isso antes. Isso nos permite vincular para pesar ligação de dados entre uma entrada e um JavaScript. Nossa propriedade de vista, devo dizer. Então vamos modelá-lo após o brilho. Se eu puder soletrar Minamata, deixe depois de brilho OK, E se nós descer aqui e mudá-lo para 0.5 e salvar, você verá que a vista automaticamente cuida do valor padrão para nós. Nós não temos que definir isso e novamente para pesar ligação de dados. Desculpe, isso é de mais cedo Podemos esclarecer que se fizermos o aplicativo ponto correto aqui em baixo, você pode ver que é em um. Se mudarmos no html para algo baixo, volte para o cônsul. Verifica isso. É ponto para dois, e podemos definir apt retidão para algo como 20.5 e ver o HTML aparecer o controle deslizante . Vai mudar 2,5. Agora, como vamos usar isso para controlar nossa opacidade? A opacidade desta luz? Se bem, vamos usar a mesma coisa que usamos para trás para a cor de fundo, vamos usar este objeto de estilo. E lembre-se, isso é apenas javascript. Então é apenas uma vírgula separada, vírgula direita. E então digitamos nossa nova chave ou propriedade, o que você gostaria de chamar de opacidade. Certo, porque isso é um CSS uh, um estilo CSS que queremos mudar. Então, se fizermos um passe, é igual ao brilho. Isso é tudo o que temos que fazer. Verifica isso. Veja isso, clicamos nele e movemos o controle deslizante e gradualmente escurece e ilumina. E podemos até mudar a cor. Tudo isso está acontecendo, certo? Isto está a meio caminho entre laranja. Completamente escurecido em laranja. Colorido. Quão louco é isso? Isso é tão fixe. Certo? E tudo isso é usar coisas que já aprendemos. Você poderia adicionar tanto mawr usando apenas os conceitos que nós meio que temos sob nossos dedos até agora no curso novamente, eu recomendo que você mexa com este experimento. Divirta-se. De qualquer forma, é o fim desta palestra, e vemo-nos na próxima. 12. Propriedades computadas: Bem-vindo de volta nesta palestra, vamos estar falando sobre propriedades computadas e usá-los para limpar e refatorar alguns de nosso código que temos em nosso projeto de lâmpada. O que são propriedades computadas lá? Outra faceta muito poderosa, muito importante da visão. O que eles são são propriedades mantidas em um objeto computado, um objeto diferente do nosso objeto de dados. Semelhante aos métodos propriedades dentro do objeto computado têm valores de uma função. Eles sempre têm o valor de uma função como nossos métodos. Assim, a função que essas funções usam a palavra-chave de retorno para determinar o que a propriedade é igual a quando acessamos. Vai entrar nisso em um minuto. Quando eu te mostrar o código para que você possa ver aqui, há um pouco, mas não haja. Não se preocupe com isso ou algo assim. Temos uma vista. Instância um l e temos esta nova propriedade, uma nova ahbd, uma nova propriedade em nossa instância vista chamada computada. E é igual a um objeto assim como nossa propriedade de dados. E assim como nossa propriedade métodos, você pode ver que temos uma propriedade dentro de nosso objeto computado chamado produto e seu valor é uma função e disfunção retorna algo tão simples quanto duas vezes dois. Ok, este é o HTML que vai junto com ele. Muito simples, mas algumas coisas para notar aqui. Então vamos falar sobre essa palavra chave de retorno. Se você não sabe o que é, tudo bem de novo. NDN tem alguma documentação realmente, realmente excelente em retorno. Você pode pesquisar no Google. Vai chegar a um monte de resultados. Basicamente, para nossos propósitos, retorno é qual é o valor que o produto vai ser igual a. Quando a função computada terminar, é ela que vai devolvê-la. Isso tem que ser no final da função. Se escrevermos qualquer código após a instrução return, esse código não será executado. Ok? E você pode ver à direita. Eu tenho algum HTML com produto em nossas raças encaracoladas. À medida que fazemos qualquer coisa em vista, temos que chaves, o nome de uma propriedade view e fechar chaves. E vai mostrar porque dois vezes dois é quatro. Se fôssemos acessar o produto ponto aplicativo a partir do console, que também retornaria para que possamos acessar essas propriedades computadas da mesma forma que iria acessar propriedades de dados, digitando ponto aplicativo e, em seguida, o nome fora da propriedade computada. Agora vamos pular para a caneta de código. Aqui estamos na caneta de código. Este é o código da última palestra. Ainda temos nossa funcionalidade. Adicionamos este controle deslizante dim no último. Então vamos começar a adicionar um objeto computado dentro de nossa visão. Instância para a lâmpada e eu vou te dizer o que vamos fazer em um minuto aqui, OK, então vamos fazer computado. Lembre-se desta vírgula aqui porque nossas instâncias de visualização, apenas um grande objeto javascript precisa ter essa vírgula também precisa ter uma vírgula no final. Agora, a ordem destes não importa. Você pode tê-los em qualquer ordem. Eu só gosto de ter meus computadores bem sob meus dados porque eu vejo computadores como um tipo de dados, apenas algo com lógica mais complexa por trás deles. Agora vamos adicionar uma propriedade a este objeto computado chamado style. Ok? E talvez você possa adivinhar é o que vamos fazer. Lembre-se, isso vai ser igual a uma função computada propriedades são sempre iguais a uma função tudo bem, uma função que retorna algo, e nós vamos chegar a isso. Então o que nós vamos fazer aqui é nós realmente vamos levar este objeto aqui para cima. Lembre-se, este é apenas um script Java, e nós vamos colocá-lo no JavaScript porque ele está ficando um pouco longo para os meus gostos. Eu acho que quando você tem algo assim, é muito JavaScript. Pertence ao JavaScript. Ele não pertence ao HTML em. Se fôssemos adicionar mais e mais propriedades a isso, ficaríamos muito, muito mais tempo, muito tempo. Eu acho que em nós vamos limpá-lo basicamente, adicionando uma propriedade computada. Ok, então nós vamos ter uma variável uma variável local chamada objeto estilo. Isto existe em Lee. Dentro desta função, ele não toca em nenhuma exibição. Instância. Você não pode acessá-lo aqui em cima. Nada como isso. Então vamos definir uma variável. Nós vamos defini-lo igual a um objeto, e este objeto vai ter que propriedades um chamado cor de fundo. Assim como aqui em cima. Lembre-se, precisamos fazer com que diga exatamente a cor de fundo. Caso contrário, html não entenderá qual propriedade CSS estamos tentando acessar, e vamos colocar essa cor de ponto. Eu falei sobre este ponto um par de palestras atrás, no início do curso. Se você não entender este stott novamente MDMS e grande documentação, há algumas coisas grandes no Google. Eles são ótimos artigos honestamente escritos sobre este ponto No entanto, para nossos propósitos, este ponto faz referência a qualquer coisa na instância view, qualquer coisa que pudéssemos acessar digitando app dot qualquer cor de ponto app digamos dentro de nossa visão, instância dentro de quaisquer propriedades ou métodos computados ou o que você tem este ponto acessa valores dentro de nossa instância view. E ele pode acessar este ponto e eu digo instância e não apenas objeto de dados, porque nós podemos realmente acessar esse estilo da mesma maneira digitando, uh, este estilo de ponto em, digamos, um método ou um propriedade computada. Ok, então este ponto refere-se a qualquer dado que temos dentro do aplicativo ou qualquer método. Você também pode alternar de referência com este ponto de alternância direita. Ok, então vamos adicionar um segundo 1 chamado capacidade. Certifique-se de que isso é opacidade e faça este ponto de brilho. Lembre-se, precisamos igualar os dados, não a capacidade estelar, porque isso não existe. Ok, agora vamos fazer um retorno de estilo. Retornos de objeto não como você viu nos slides retorna fez um fez duas vezes dois, que está retornando apenas um número antigo simples. Retornos também pode retornar uma variável local variável como objeto estilo. Certo. Então estamos retornando objeto estilo. Isto é que você pode voltar. Você poderia fazer assim. Bem, um que algumas pessoas podem preferir. Eu só acho que isso é um pouco mais explícito e eu gosto mais, mas você pode devolver apenas o objeto em si se você quiser eso enfraquecer novamente. Como eu disse, podemos acessar as propriedades do computador com o aplicativo dot Nome da propriedade do computador, Então o estilo do ponto do aplicativo Você pode ver que ele está retornando um objeto com a cor de fundo do amarelo e opacidade de um. Certo, porque nosso brilho está definido no dedo um. Quando o Quando as instâncias criaram a instância de exibição eu deveria dizer é criado e você pode ver que este é o Este objeto aqui é exatamente o mesmo que este objeto aqui. Então o que nós vamos fazer é apenas vamos substituir este estilo V bine por estilo. Certo? E ver automaticamente vai conhecer esse estilo Bem, é Ah, é uma diretiva de visão. Então o valor dele tem que estar em algum lugar dentro da instância view, certo? E então ele olha nos dados e diz, OK, não está nos dados na cor. Brilho conhece um estilo que olhou através dos computadores e diz, OK, eu encontrei estilo. O que é esse retorno agora? Esta é uma A próxima coisa que eu quero falar é uma faceta muito, muito importante das propriedades computadas. Certo, então se fizermos a cor do ponto do aplicativo, digamos agir até o brilho. Tudo bem, se eu souber soletrar, uh é igual a um certo? E se mudarmos isso por aqui, eu tenho o brilho está definido para 0,54 agora. OK, se olharmos para o estilo ap dot, ele também está definido para 0.54 Nós mudá-lo novamente. Olhe para ap ponto de brilho 0.77 no estilo de ponto. A propriedade computada é atualizada automaticamente devido ao uso de magia. O que está acontecendo na visão de fundo sabe que ele olha para a frente auto-referências, eu deveria dizer para outros dados dentro desta visão. Instância. Então ele diz Ok, esta cor escura e este brilho de parada estão ambos dentro deste computado. Então, sempre que essa cor escura ou essa parada de brilho, você sabe, aqui, a cor e o brilho, sempre que essas mudanças de visão automaticamente re computa esta propriedade. Ok? E é por isso que se chamam computadores. Eles calculam quando qualquer coisa dentro deles muda qualquer coisa dentro deles. Isso faz parte das mudanças de instância de exibição, certo? Então é uma coisa muito poderosa, uma coisa muito legal, e algo que pode ser muito, muito útil para nós, certo? Porque agora você pode ver que está fazendo exatamente a mesma coisa. Podemos mudar a cor. Também mudará a cor. Ok, é só isso. Com computadores. Espero que tenha gostado disso. Achou-os divertidos. Como eu disse, experimento bagunça. Veja o que mais ele pode fazer com, hum, na próxima palestra, nós vamos estar olhando, Maura computou objetos para criar ah, valor percentual do nosso controle deslizante fraco. Então fique ligado para isso. Vejo você na próxima vez 13. Exibindo um valor de destaque: Ei, todo mundo. E bem-vindo de volta ao que é realmente a palestra prática final na vista Js Craft Course Eu estou realmente orgulhoso de todos vocês por fazer isso até aqui neste, nós vamos estar usando uma propriedade computada para mostrar ah porcentagem de nosso brilho. Nós vamos mostrar, você sabe, 50%. Se o nosso brilho for igual a 0,5, vamos começar. Então eu só vou digitar brilho html simples. Ele só vai aparecer aqui é como texto e, em seguida, para chaves. E o que acontece se apenas digitarmos brilho? Bem, vai fazer referência à nossa propriedade de brilho aqui em nosso objeto de dados. E se movermos o controle deslizante, ele vai mostrar, você sabe, ele vai mostrar a porcentagem, mas nós queremos que isso fique um pouco mais bonito. Nós não queremos que ele mostre 0,27 Nós queríamos mostrar 27% certo? Como vamos fazer isso? Bem, vamos usar uma propriedade computada para executar alguma matemática em nossa propriedade de brilho dentro de nossos dados. Então lembre-se que temos que usar uma vírgula porque são computados. Objeto é apenas que ele é um objeto, e nós vamos criar uma nova propriedade de computador chamada dim Percentual. Certo, e lembre-se de todas as propriedades computadas. Seus valores são sempre uma função, e eles sempre têm que retornar algo. Então vamos começar com o retorno deste ponto brilho vezes 100. Ok, então lembre-se que este DOT está referenciando a instância de exibição em si, e ele vai procurar brilho. Brilho é um, e vai multiplicar esse por 100. Então agora ele está dizendo que o brilho é igual a um, e isso é porque eu esqueci de mudá-lo aqui em cima. Lembre-se, nós temos que mudá-lo em nosso modelo também. Brilho não é igual a isso. Queremos ser iguais à percentagem fraca. Ok, e agora é igual a 100 que você pode ver quando mudá-lo, ele muda o número. Bonita, bonita, muito incrível, certo? É muito fácil fazer isso, como matemática. Ou você poderia até fazer matemática mais complexa. Você vai notar aqui que ele está piscando aqueles números realmente estranhos de vez em quando, certo? Por causa de coisas internas com JavaScript, eu acho que um HTML. Mas há uma maneira de consertar isso e o que vamos usar é, ah, ah, função chamada não virada. Toda a função JavaScript chamada matemática dot round. E isso só vai arredondá-lo para o valor inteiro mais próximo para que ele tem. Não, não pode haver casas decimais, certo? Então resolvemos esse problema. Não está mais mostrando aqueles estranhos entre números, e é só isso. Para isso, também podemos adicionar, ah, ah, por cento de inscrição aqui no próprio HTML, e ele mostrará por cento. Poderíamos adicionar isso no JavaScript também, fazendo ah, sinal mais e um sinal de porcentagem. Agora você vê seus sinais de 2%. Mas eu prefiro aqui em cima porque, você sabe, isso é HTML. Está no HTML onde pertence. Você pode ver que é realmente tão fácil fazer algo assim, apenas usando uma propriedade computada, a fim de mostrar isso. Tudo bem, junte-se a mim na próxima palestra para um embrulhar alguns takeaways chave sobre o meu parabenizá-lo por terminar este curso. Bem feito. Veja que 14. Wrapping e seu projeto!: Bem-vindos de volta, todos para a palestra final do curso de artesanato vista Js. Parabéns. Você conseguiu passar. Espero que você saia deste curso sabendo um pouco mais sobre a estrutura do que você fez antes. E eu espero que você possa ver o porquê. Eu acho que é uma ferramenta tão fantástica em desenvolvimento Web agora. Este foi apenas um curso intensivo, uma fatia do que eu acho que são os conceitos mais cruciais dentro do quadro de visão. Se você gostou do quadro se você pensou que era legal, eu recomendo que você confira a documentação vista Js, bem como me siga aqui no compartilhamento de habilidades porque eu estou olhando para a criação de alguns ou ver conteúdo relacionado. Se a demanda está lá agora, vamos falar sobre alguns aspectos fundamentais o que você deve agora ser capaz de fazer com vista. Mas, no mínimo, espero que você possa criar uma instância de você e fazer alguns dados reativos e saber o que colocar dentro do HTML. Para que esses dados apareçam, você deve ser capaz de usar um aumento em vista e a diretiva V quatro para renderizar listas de dados em HTML. Com base nesses raios, nós realmente não usamos isso em nosso aplicativo de lâmpada, mas nós aprendemos isso no início da lista renderizando palestra do curso. É um conceito crucial, então é por isso que eu queria cobri-lo. Você deve ser capaz de criar e usar métodos de visualização e além. Para tornar o HTML interativo, você deve ser capaz de usar diretivas de exibição como VF V Bind e o modelo para fazer o HTML falar para ver e vice-versa. E você deve ser capaz de usar views propriedades computadas para armazenar dados de dados mais complexos que exigem cálculos e similares. Agora quero mostrar algo que eu criei. Isso é um pouco mais avançado na aplicação da lâmpada. Eu o chamei de “View Dot TV “, e o que ele faz é que não faz um monte de coisas. É basicamente que eu queria modelar uma TV. Eu estava indo originalmente para apenas mostrar imagens na tela e ter a instância de exibição manter coisas como dados de canal e dados de volume. Quando você muda o canal, ele mudaria a imagem, e os dados de volume realmente não faria muito, exceto exibir o controle de volume que você tem lá Mas como eu sou conhecido por dio, eu levei um passo adiante. Eu realmente usei o YouTube I enquadrar um P I, a fim de criar algo que realmente abrigaria transmissões ao vivo dentro da televisão. O canal altera a transmissão ao vivo que você está ouvindo. É tudo isso. Você sabe, O frio bate o dedo do pé estudo para que estão no YouTube, todos aqueles 24 7 transmissões ao vivo e o volume enquanto ele aparece na tela. Ele também controla o volume do player do YouTube. Então é uma demonstração mais substancial de um projeto que eu teria criado se eu tivesse feito este curso. Ele usa algum CSS ou avançado do que vimos na lâmpada. Eu não usei essa TV como exemplo porque eu não queria me concentrar no CSS. Havia um monte de CSS que eu tinha que fazer a fim de fazer esta função bem. Eu também usei recursos de script de trabalho externo como o YouTube I enquadrar um P I, como eu disse anteriormente, e eu não queria ficar muito atolado com essas coisas. É por isso que eu criei algo tão simples para que pudéssemos focar Onley na visão em seus dados. Algo que eu realmente quero enfatizar é que este aplicativo de TV ponto vista usa conceitos Onley que aprendemos aqui no curso. Ele não usa nada além dessa visão sábia. Como eu disse, Avançar CSS e jazz externo. Mas os conceitos de Onley que aprendemos aqui no curso quando se trata de visualizar e toda a aplicação é praticamente, você sabe, como 85 90% de visão, então eles serão um link para ele. Você pode conferir É no código Panic criou no Cope em será um link para ele. Nas notas desta palestra sobre, Eu encorajo você a verificar. Você pode olhar para o código-fonte. Uma ondulação é apenas brincar com ele. Eu realmente gosto do aplicativo. Eu estava feliz com isso, e agora é a sua vez. Quero que pegue todo esse novo conhecimento de visão e faça algo o mais criativo possível . É apenas um objeto com o estado, certo? Então, realmente, qualquer dispositivo eletrônico que você conhece, você poderia fazer alto-falantes que você poderia fazer até mesmo como um console de jogos de vídeo house dados de usuário. Qual jogo está sendo executado no momento? Qualquer coisa. Sabe, Sky é o limite. Pense grande e crie algo muito legal. Para fazer isso, você vai para o código pen dot io e criar uma conta se você ainda não fez isso . Eu lhe disse para fazer isso no início do curso, mas se você decidiu não fazer isso, agora é a hora de fazê-lo. É assim que vamos compartilhar nossos projetos dentro da guia projetos e recursos fora do curso. Você só vai compartilhar um link, bem como uma miniatura se você assim escolher o seu projeto final . Agora, eu quero mencionar mais uma coisa antes de terminar o curso na guia projetos e recursos deste curso, há um link para um pdf fora da vista Js ofício curso tt que eu fiz em sua tem todos os conceitos que aprendemos ao longo do curso, bem como exemplos de como usá-los. Agora quero aproveitar um momento para agradecer por ter feito este curso. Realmente significa muito para mim que você queria aprender mais sobre este quadro fantástico que eu amo tanto. Se você deixasse uma crítica, eu virava. Seja eternamente grato. Eu realmente apreciaria isso e qualquer coisa construtiva que você tenha para mim. Quero aprender a ensinar melhor porque ajuda você a aprender. E esse é realmente o meu objetivo em criar este curso e quaisquer outros cursos, eu me certifico de seguir-me também porque eu definitivamente estarei carregando mais cursos para compartilhamento de habilidades. Diverti-me tanto a fazer isto. Obrigado por se juntar a mim nesta vista Js curso intensivo. E espero vê-lo em breve em um curso futuro. Obrigado por se juntar a mim.