Entendo o conceito de VueJS

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:

Métodos

Assim como temos a possibilidade de utilizarmos váriaveis na DOM, também podemos fornecer funções pra serem executadas!

Com esse simples exemplo, obtemos o resultado de 9 e 5 exibidos diretamente no nosso HTML.

Além disso, podemos também utilizar as variaveis que estão dentro da propriedade "data" por meio da palavra reservada "this". O "this" faz referência a própria instância do VUE, o que permite utilizamos seus respectivos valores.