Vuejs e suas bases— Parte 1

O objetivo dessa série de artigos é entender as bases do Vuejs para ajudar no desenvolvimento nosso de cada dia.

Silvana Lima
May 21 · 6 min read

Nessa série de artigos vamos falar sobre a base do vuejs , aprender como funciona o Frameworkvuejs , que é aquele framework bacana, flexível e que vem ganhando espaço no mercado. 🤙

Como o intuito nessa série será trabalhar em cima dos princípios do vuejs, não usaremos as ferramentas nem as libs do Vuejs, 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 instancia do Vuejs, veremos mais a frente sobre isso. 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 nada mais é.. o 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 instancia passe a controlar, nosso id'#app' a partir dele conseguimos manipular a DOM

Então, conseguimos manipular a DOM com o Vue, crio então o atributo data: que é um objeto, que pode ter vários atributos, e 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 esse resultado.

Ou seja… tudo que está dentro da div #app é o template, que será controlado pela instancia 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!”

Vemos 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 é 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

Pra gente acessar dados na instancia 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 , isso porque como mencionado anteriormente, conseguimos acessar de forma direta.

Tudo isso porque o this nesse contexto representa a instancia do Vue , como vemos abaixo temos a instancia do Vue e dentro dela temos tanto a message como a função say

Por estar dentro da instancia 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, por que identificaria que message já foi definido um dado com esse nome.


FAZENDO BINDING DE ATRIBUTOS

Como faríamos se quiséssemos passar um link para ohref ?

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.

Se a gente tentasse 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 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 instancia 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.

Dica: Você também pode usar v-bind em sua forma abreviada :


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…

Segunda parte aqui!


Se esse artigo foi útil , fortalece com 👏 e ajude a chegar em mais pessoas.

Silvana Lima

Written by

Software Developer at Band | Technical Writer | http://silvanavlima.github.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade