Nesta série de artigos nós vamos falar sobre a base do Vuejs e aprender como funciona o framework Vuejs, que é aquele framework bacana, flexível e que vem ganhando espaço no mercado.

Como o intuito desta série será trabalhar em cima dos princípios do vuejs, não usaremos as ferramentas nem as libs dele, trabalharemos com ele puro.

Vamos lá!

O template do Vuejs

A primeira coisa que você precisa fazer é criar uma pasta e, dentro, criar um arquivo com extensão .html e importar o Vuejs via CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Agora definimos uma div com o id app. Dentro dela colocaremos um <p>, e dentro dele, uma interpolação usando {{ message }}.

Essa message vem a partir da instância do Vuejs (voltaremos nisso mais à frente). Com esse simples modelo de template o Vuejs vai nos permitir renderizar dados para DOM!

<div id="app">
  <p>{{ message }}</p>
</div>

Agora precisamos criar um <script> que já conhecemos –  serve para colocar nosso JavaScript dentro dele, e instanciaremos também o Vuejs a partir da função construtora Vue().

Depois precisaremos passar uma série de parâmetros. O primeiro é o el:, que é o cara que queremos que a instância passe a controlar nosso id '#app'. A partir dele conseguimos manipular a DOM.

Conseguimos manipular a DOM com o Vue. Crio o atributo data:, que é um objeto que pode ter vários atributos.

É nesse momento que declaramos a message que colocamos lá no template. É ele que queremos colocar dentro do nosso html.

Teremos o <p>{{ message }} </p> sendo substituído dentro do template.

Dê um F5 no seu navegador e deverá ter o resultado a seguir:

Ou seja, tudo que está dentro da div #app é o template, que será controlado pela instância do Vue.

A message é basicamente uma manipulação da DOM através do Vue. Colocamos o texto da message usando o padrão {{ }} dentro do html.

O Vue é o intermediário entre o template e aquilo que será renderizado no browser, Ele é como o “meio do caminho”.

Inspecionando nosso aplicativo veremos que ele é muito parecido com o que escrevemos em código, ou seja, não tem “códigos desconhecidos”, coisas que não sabemos do que se trata.

Ele vai pegar o html que você escreveu e fazer algumas intervenções minimas e necessárias para renderizar o conteúdo desejado.

Se você inspecionar, verá que ele mostra bem parecido com o que você escreveu.

O Vue guarda o template em memória, isso faz com que ele consiga alterar o html de uma forma muito bacana.

A sintaxe do template e a instância Vuejs

Vamos conhecer uma propriedade chamada methods. Dentro dela vamos criar nossos métodos.

Para começar, vamos criar o método say(), ele será uma função e vai retornar uma string.

E para chamar esse método dentro do template, fazemos da seguinte forma:

Vamos adicionar um <p>{{ say() }}</p>. Dessa forma, conseguimos acessar esse método say() e será renderizado o retorno “Ola, terraqueo!”

Podemos ver o resultado no navegador:

Com isso, a gente percebe que o Vuejs cria acessos diretos, quando se trabalha, por exemplo, dentro do template. Não é necessário armazenar a instancia do Vue em uma variável como, por exemplo, algo do tipo var.methods.say.

Ao invés disso, temos o acesso direto como vimos acima, como também temos acesso direto a tudo que está dentro de data.

É importante pontuar que tudo que vai ser interpretado dentro do {{ }} precisa ser retornado como string, tanto no caso do message, como no caso do método say.

Isso porque o HTML é um padrão textual – isso quer dizer que o que é renderizado no html não tem tipo objeto, nem boolean, etc. Tudo que vai ser jogado para o html deve ser string.

Acessando os dados na instância Vuejs

Para acessarmos dados na instância do Vue, por exemplo, em nosso método say(), gostaríamos de acessar o message.

Para isso, seria bem fácil. Basta usar o this, já que, como mencionado anteriormente, conseguimos acessar de forma direta.

Tudo isso porque o this, nesse contexto, representa a instância do Vue. Como vemos abaixo, temos a instância do Vue e dentro dela temos tanto a message quanto a função say.

Por estar dentro da instância do vue, não podemos, por exemplo, repetir a nomenclatura.

Se criasse uma função com o mesmo nome, por exemplo, função com nome message, ele daria conflito, porque identificaria que message já foi definido como um dado com esse nome.

Fazendo binding de atributos

• Como faríamos se quiséssemos passar um link para o href ?

Primeira coisa que faremos é colocar um <a href="">Vuejs</a> lá no template. Depois, criaremos um atributo em data, com nome url e passaremos o valor do endereço que queremos acessar.

E se tentássemos colocar {{ url }} dentro da propriedade da tag o valor da url:

Daria erro e esse link não funcionaria. Ele não foi interpolado no contexto de um atributo de uma tag.

A forma correta para fazer isso é usando a diretiva chamada v-bind:. Depois dos : colocamos o nome da propriedade que desejamos que seja interpretada pelo Vue.

O v-bind serve para fazer essa ligação entre algo que está na instância do Vue e um atributo da sua tag dentro do template.

Diretivas são atributos especiais com o v- prefixo. Espera-se que os valores dos atributos diretivos sejam uma única expressão JavaScript (com exceção de v-for).

O trabalho de uma diretiva é aplicar efeitos colaterais de maneira reativa ao DOM quando o valor de sua expressão é alterado.

Bem, chegamos ao final dessa primeira parte.

Conclusão

Chegamos ao final da primeira parte sobre a base do Vuejs. Falamos um pouco sobre o template, a instância do Vuejs e binding de atributos.

Até os próximos artigos!