e Fala jovem Thiago Matos aqui estendendo o assunto da aula passada the data-base a gente vai introduzir o assunto também muito importante chamado the two way data binding simbora comigo cara esse conselho também é muito importante então vou anotar aqui ó vou criar um bloco aqui para ficar mais fácil two way data binding certo E para isso acontecer a gente vai utilizar uma nova diretiva v-model que vai servir basicamente para formulários cara como é isso olha só a gente veio aprendendo aqui ou data-base normal né a gente colocou uma pega ml a gente colocou um
plus uma variável aqui e a gente der um bar etc e a gente ver o que essa variável aqui tem um valor e quando a gente altera-se o valor via sistema esse valor é aplicado aqui nessa variada porém da forma inversa não tem como a gente alterar o valor da variável vindo aqui do elemento eu não tinha essa possibilidade a gente só tem a possibilidade de alterar o valor tendo aqui no sistema e por isso que esse é o formato de One Way data binding ou apenas é da também está certo e agora a gente
vai prender o tio aí data-base que são basicamente formulário como a gente tem um input certo que acontece eu tenho o valor dele aqui ó que o valor dele é o nome de alguém Jorge long então o sistema populoso isso daqui Jornal A primeira direção né é uma ligação de bidirecional de Mão Dupla como você queira chamar então o sistema atualizou o nome só que o usuário também pode chegar lá e digitar e aí o usuário também vai atualizar o nome então eu posto aqui no meio o sistema atualiza esse valor e o usuário também
pode atualizar esse valor e o valor do input cara tem que estar né sincronizado porque quando um outro a se atualizar ele tem que receber essas informações atualizadas é isso Chuí dois lados o p direcional certo ligação de Mão Dupla como você queira chamar e como é que a gente vai fazer isso usando ver molho e aqui eu vou colocar nem me né o nome do cara a gente nem precisa declarar o valor Boo remover esse daqui porque foi teste e aqui vou ter que orar mesmo olha só que bacana olha só o que que
vai acontecer então deixa eu dar um beijo aqui na ficar mais leira olha só que bacana E se eu colocar agora aqui Joice não ele vai atualizar que automaticamente ou seja foi a primeira direção alterei o valor pelo sistema agora o usuário vai lá e colocar um input dele Tiago mais alteram o valor então a segunda direção Tá certo muito bacana agora cara a gente vai fazer mais experimentos aqui olha só vou criar outro blog para facilitar vou colocar nome aqui embaixo para a gente de bugar a gente sabe que interpolação a gente pode imprimir
qualquer valor aqui qualquer é dados dinâmicos Tá certo vou colocar um leigo aqui para ficar bonitinho não a gente começa a montar um formulário aqui certo nome aqui vai precisar de um Dr também L7 Então olha só que aconteceu já tá aqui então ensinou remover certo me removeu daqui vou voltar ele ele apareceu aqui automaticamente tá tudo sincronizado aí agora o usuário vai lá e diz assim ó Thiago Matos em tempo real tá todo mundo atualizado e é mágica jovem é mágica viu dei a ser Mágica vamos que vamos que tem muita exemplo para gente
ver hoje e muito exemplo Bacana Então basicamente para formulários E como você sabe a gente pode aplicar isso em qualquer elemento de formulários HTML por exemplo de água por exemplo ou seu ex se ela quiser um bom exemplo e de fato a gente não precisa colocar mais nada só o bem modo e aqui vai ser o que deixa eu ver aqui esportes Vamos colocar uma lixa de esporte aqui que o cara tem que escolher um sei lá então vou colocar aqui esportes né E aqui vai ter os óculos as opções vou colocar primeiro futebol Claro
é bom vou colocar skate o skate e skate e tênis tênis perto qualquer um aí qualquer coisa só para gente exemplo ficar Vou colocar aqui não lembro também o esporte esportes estou em inglês português aí foi beleza mas enfim você entendeu o espírito da coisa cara já veja logo aqui ah esqueci uma coisa options escolha aqui valor vazio é isso que eu ia falar veja aqui isso aqui tá vazio Esporte Ele já pegou aqui vazio e já marcou aqui ó cara e Fantástico seu jogo aqui ó futebol Olha só por ele já vêm marcado futebol
ou seja o rede essa identifique aqui isso daqui é um select vai atrás do cara para selecionar Tá certo o show de bola e aqui eu posso também alterar na skate tênis etc e como de costume eu vou imprimir aqui esportes para gente acompanhar as alterações aqui ó futebol sequer e automaticamente ele atualiza ou seja de novo atualização de duas mãos né bidirecional Vamos lá para mais um exemplo esse exemplo vai ser contrato até vamos supor que você tem uma sessão de contrato contrato não vou colocar aqui minhas meus betas mas poucos têm uma sessão
de Mc Lan que a receber nossa newsletter assim não né coisa comum e desta aqui mais serve como exemplo para gente e aí você vai colocar dois rádios né duas rádio botão com o valor de não vai ser sim beleza éh aqui nesse caso eu acho que a gente não precisa colocar nome vamos testar sim ó e aqui a gente vai colocar não e o valor não certo e aí a gente vai colocar o vem modo em Deus leva o modo nos dois porque porque porque é porque ele vai fazer isso daqui ó esqueci de
dar um BR SAC para facilitar e a visualização minha Seleta esquecer de imprimir também o a newsletter newsletter coração se eu clicar em sim ele fica assim só clicar em não oferecer Carol pronto e não tem mais ou tem mais não tem mais nem o que falar super simples você pode colocar uma lista de opções rádio o botão e aí o cara o valor que o cara marcar vai ser você falou aqui que vai ser puxado certo e obviamente se eu coloco aqui sim ele vai vir marcado já assim automaticamente ou se eu colocar aqui
não ele vai vir marcado não automaticamente Tá certo e é tudo mágica jovem é branco e esse valor daqui a Exatamente esse valor daqui perfeito e aí para gente fechar com chave de ouro mais um mais um exemplo aqui O que é bem parecido com o rádio bota mais seria Xbox Xbox e nesse caso aqui check Box é a gente tem duas situações primeiro situação situação é Vou colocar aqui ó contrato aquele botãozinho aceita nos contratos é você tem que colocar o checkbox né aceita nosso contrato nossos termos né termo sei lá é sincero aí
aqui vai ser contra e aqui vai ser contracts aí eu tenho que criar aqui com fraca ó e vai ser é falso Hum eu vou tirar esse valor daqui e acho que é isso se eu não me engano vamos lá contrato aceita tá falso aqui tá vendo deixa eu dar um BR aqui tá falso Se eu marcar o futuro um Mamma Mia muito simples muito simples e se você já quiser que ele venha marcada só que chegar conto né ele já vêm marcado essa primeira situação de contrato a outra situação é quando você tem múltiplas
escolhas vamos supor Você tem uma pesquisa Mark aí as cores cores que você que você mais gosta Aí eu tenho aqui Colors the Colors Colors e aqui ó Tech Black declaracoes olha só que bacana isso daqui é muito show aí vem aqui azul o e amarelo perto obviamente aqui tem que passar a o valor e aqui vai ser checkbox e vai ser checkbox o efeito cores que você mais gosta azul e amarela escolas marquei Azul ele pegou outro aqui e ficou os dois marcados a Tiago não era isso que você iria mostrar Não na verdade
cara isso daqui agora a gente tem que fazer o seguinte transformar esse daqui em Array aí quando a gente Transform Array Olha Só marquei Azul ele pega azul e amarelo ele pega Amarelo aí pa se você rapaz eu fico empolgada é muita mágica para uma pessoa só para um cremoso só então você pode colocar uma lista aqui de opções para o cara sair marcando quais ele quer e aí você vai capturando numa Rei aí é só depois salvar no banco de dados ou em qualquer outro lugar o show de bola show de bola cara é
isso daí lembre-se que esse conceito é muito importante né o tio ainda trabalha aqui é de novo a vinculação a ligação de dados de Mão Dupla bidirecional acerta muito interessante você ter isso claro na sua cabeça Beleza então vamos seguir em frente eu vejo vocês aí na próxima aula foi bom [Música] [Música]
