O que é?
Resumindo o Vuejs é uma biblioteca javascript que busca manipular elementos HTML(DOM) por meio de lógicas de promogração feitas a partir do Javascript. Tudo que acontece na aplicação é feito a partir da instancia de Vue que faz o gerenciamento desses elementos por meio de valores e tags.
Exemplo inicial
Pra gente entender melhor como funciona tudo isso, vamos fazer ver esse exemplo abaixo. Nele estamos criando uma página básica em html com vue importado, uma tag div com id “app” e umas informações na tag script.
Idai? Bom, a grande jogada inicial esta nas informações fornecidas pelo console.log. Nele podemos ver que já estamos conseguindo capturar elementos existentes na DOM, e é ai que a brincadeira começa!
Conforme deu pra ver o nosso objeto “options” já está com o nosso app. Em projetos instalados por CLI é normal o elemento principal ser chamado de APP, o que eu to fazendo aqui é mostrando o parte inicial pra ficar bem claro o que está acontencendo.
Atributos reativos
Atributos reativos são simplesmente variáveis que serão enviadas para o HTML por meio do JavaScript. Com isso, poderemos “enviar” essas váriaveis para a DOM utilizar como bem entender por meio do que podemos chamar de “double mustache”. Obs: Esses valores são enviados por meio da propriedade DATA.
Que raios é double mustache? É só abre e fecha chaves kkk. Exemplo: {{ pessoa_idade }}
Se liga nisso:
O primeiro faz referencia a variavel exportada lá na propriedade “data” do objeto “options”, enquanto o segundo elemento é apenas um texto simples. Resultado:
