sexta-feira, 16 de novembro de 2018

Vue - Parte 2 - Vue Instance e Reatividade

Na parte 1 dessa série fizemos uma breve introdução sobre o Vue, e também uma breve comparação com seus dois grandes concorrentes: React e Angular. Nessa segunda parte vamos olhar mais de perto para o objeto Vue que usamos em nosso primeiro exemplo no artigo anterior. Vamos retomar aquela aplicação (se é que dá pra chamá-la assim) e aprender conceitos importantes como data binding, reatividade e a propriedade template.

Vamos dar uma olhada novamente no código que fizemos na parte anterior.

O objeto Vue que instanciamos recebe como parâmetro um objeto, chamado de options, que deve conter algumas propriedades mínimas para, digamos, ser útil. A primeira é a propriedade el. Ela serve para informar ao Vue em qual elemento html ele deve montar a sua aplicação. O conteúdo do elemento selecionado será controlado pela instância do Vue quando a página for carregada. Você pode passar qualquer seletor css válido para el: id, classe, tipo, atributo, etc.

Outra propriedade que utilizamos foi data. O nome é bem sugestivo não é mesmo? Nela você irá declarar o modelo de dados da sua aplicação. No código acima criamos uma propriedade chamada msg e exibimos o seu valor dentro da tag h1. Lembra que falamos que o Vue gerencia tudo que está dentro do elemento que selecionamos em el? Pois bem, ao carregar a página, Vue irá trocar a marcação {{ msg }} pelo valor da propriedade msg de data. Não apenas isso! A propriedade msg passa a ser Reativa a partir de agora.

Reativa?! Calma, não vamos falar de Química ou de Física aqui. Reatividade nesse contexto quer dizer que essa propriedade irá reagir a mudanças, de forma que se o seu valor for modificado a página irá refletir automaticamente esse mudança. Sem recarregar, sem precisar de Ajax, sem precisar fazer nada. Vue irá fazer isso pra você. A mudança é feita no Virtual DOM e somente a parte que mudou será renderizada novamente. Vamos fazer uma pequena alteração em nosso exemplo para que possamos testar essa reatividade na prática.

Nota: Preste bastante atenção à sintaxe da propriedade data. Ela precisa obrigatoriamente retornar um objeto com as propriedades que queremos definir. Na verdade, data pode ser uma função que retorna um objeto, mais adiante, quando estudarmos Components, teremos que obrigatoriamente usar dessa maneira.


Extraímos o conteúdo de data para uma variável externa, pois assim conseguiremos alterar seu valor no console do navegador. Abra o devtools do navgador (normalmente ctrl + shift + i) e no console altere o valor de msg: data.msg = 'Outro valor'. Você irá notar que o conteúdo de h1 irá mudar assim que o valor de msg for alterado no console. 


A figura acima mostra em alto nível como Vue reage às mudanças das propriedades definidas em data. Vale lembrar que as propriedades de data só são reativas caso sejam definidas antes da criação do objeto Vue. Se você adicionar uma propriedade após a instanciação do objeto vue, por exemplo: data.valor = 10, valor, embora associado a data, não entrará no sistema de reatividade. Vue irá inclusive gerar um alerta para você. Para terminarmos essa 2ª parte, vamos falar sobre a template syntax usada em Vue.

Template Syntax

Vue escolheu a sintaxe de templates baseada em HTML para renderizar suas views. A tag template é uma das novidades do HTML 5. Ela suporta qualquer conteúdo HTML válido, porém não é renderizada diretamente pelo navegador, é preciso usar Javascript para renderizar seu conteúdo (não se preocupe, Vue faz isso automaticamente para você).

Além de código HTML, os templates suportam expressões javascript através de interpolações como a sintaxe Mustache (chaves duplas), bastante popularizada pela biblioteca handlebars. Quem veio do Angular não deve estranhar a sintaxe, já que ele também a utiliza em seus templates html.

É possível referenciar qualquer propriedade definida em data diretamente em um template. Chamamos isso de data binding. Note que não é preciso usar this antes da propriedade. Isso é possível porque o Vue faz essa ligação pra nós. Quando estudarmos outras propriedades como methods, você verá que é preciso usar this, mas isso fica pra outra hora.

Como já falamos antes, é possível usar expressões dentro dos templates. Uma expressão precisa retornar um valor, então as expressões abaixo são válidas nos templates:
  • {{ 1 + 1 }}
  • {{ ok : 'sim' : 'não' }}
  • {{ msg.toUpperCase() }}
Uma outra propriedade disponível na instância de Vue é template. Nela é possível passar o conteúdo de um template diretamente para o objeto vue no momento da sua criação. Vejamos um exemplo de como fazer isso.

O conteúdo a ser renderizado agora está dentro da propriedade template. Você também pode usar o recurso de template strings do ES6 para escrever conteúdo em várias linhas.

É possível referenciar um template definido na sua página html.

Quando estudarmos sobre a criação de componentes Vue, iremos usar bastante os templates, mais especificamente SFC (Single File Components). Vamos parar por aqui por enquanto. No próximo artigo veremos como deixar nossas aplicações mais dinâmicas e interativas com methods. Até o próximo artigo!

Nenhum comentário:

Postar um comentário