Básico sobre Vue.js
Neste post vou falar o básico sobre o Vue.js.
Lembrando que esse conteúdo é relacionado ao que eu sei e ao que eu aprendi, então, caso você já conheça o vue.js e queira acrescentar mais alguma coisa, basta adicionar nos comentários ou entrar em contato pela página de contato.
Vamos lá,
Primeira coisa que você precisa saber é como pronunciar rsrsrs. A pronuncia e igual a palavra em inglês “view”, se você não sabe inglês, clica aqui e escuta a pronuncia da mulher do google.
Agora que você já sabe pronunciar, vamos começar.
Vue.js é um framework progressivo projetado para ser usador de forma incremental. A biblioteca principal é focada apenas na camada de visualização e é fácil de entender e integrar com outras bibliotecas ou projetos. Caso queira saber mais a fundo, pode ir direto na documentação do vue.js
Como pré requisito, para iniciar com Vue.js, vocês devem ter conhecimentos em html, css e javascript.
Primeiro passo é criar um arquivo html e importar o arquivo do vue com uma tag <script> dentro do <body>
Dentro da tag <body> vamos criar uma div #primeiros-passos e dentro dela colocaremos um titulo <h1>.
Ainda na tag <body> vamos criar uma tag <script> e dentro dela vamos criar uma instância vue. new Vue({})
Na instância, vamos adicionar um parametro que define em qual elemento ela vai atuar – el: ‘#primeiros-passos’. Neste caso, a instância vue vai atuar na div que acabamos de criar dentro do <body>
Info: no canto superior dos códigos na tela, você pode clicar no icone de play e executar e para ver o resultado aqui mesmo na página
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iniciando com Vue.js</title>
</head>
<body>
<div id="primeiros-passos">
<h1>Meus primeiros passos com vue.js</h1>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vm = new Vue({
el: '#primeiros-passos',
})
</script>
</body>
</html>Pronto, agora estamos prontos para começar a ver as mágicas acontecendo.
Dentro da instância new Vue, vamos criar um objeto data.
Quando uma instância Vue é criada, ela adiciona todas as propriedades encontradas no objeto data ao sistema de reatividade do Vue. Quando os valores de qualquer destas propriedades muda, a camada visual “reage”, atualizando-se para condizer com os novos valores.
No objeto data, vamos começar criando a propriedade header e dar um valor a ela. Nesse caso vamos colocar uma string com o titulo que desejamos.
Agora vamos usar um recurso chamado interpolação para levar o valor de header para o nosso html.
Interpolação é quando usamos chaves duplas e passamos um parametro. No nosso caso, vamos usar {{ header }}. Esse código pega o valor de header dentro do objeto data e aplica no nosso html. Caso o valor de header mude, o html reage e muda também.
Na interpolação os dados fluem sempre da sua origem para o template e nunca o caminho contrário.
Nosso código está assim até o momento:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iniciando com Vue.js</title>
</head>
<body>
<div id="primeiros-passos">
<h1> {{header}} </h1>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vm = new Vue({
el: '#primeiros-passos',
data: {
header: 'Titulo do meu projeto vue'
},
})
</script>
</body>
</html>A interpolação também aceita alguns comandos javascripts, por exemplo, podemos transformar nosso titulo e colocar ele todo em caixa alta com .toLocaleUpperCase() ou podemos usar uma condição ternária.
ex: {{ header ? header : ‘olá mundo’ }}
Para quem não entende muito de javascript, essa condição diz: se header existe, exiba header, caso contrário, exiba ‘olá mundo’.
Vejamos no código, se tirarmos o valor de header e usarmos a condição ternária acima teremos:
<div id="primeiros-passos">
<h1> {{ header ? header : 'olá mundo'}} </h1>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vm = new Vue({
el: '#primeiros-passos',
data: {
header: ''
},
})
</script>Diretivas
Diretivas são basicamente atributos HTML que são adicionados dentro de modelos. Todos começam com v-, para indicar que é um atributo especial do Vue.
v-text
Em vez de usar a interpolação, você pode usar a diretiva v-text.
Ele faz a mesma coisa:
<div id="primeiros-passos">
<h1 v-text="header"> </h1>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vm = new Vue({
el: '#primeiros-passos',
data: {
header: 'Titulo do meu projeto vue'
},
})
</script>v-html
Existem casos em que você deseja gerar HTML e fazer com que o navegador o interprete
Veja que nesse caso removemos a tag <h1> do html e passou para dentro da propriedade titulo. Poderíamos fazer isso com qualquer código HTML que quiséssemos colocar na tela.
<div id="primeiros-passos" v-html="titulo">
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vm = new Vue({
el: '#primeiros-passos',
data: {
titulo: '<h1>Titulo do meu projeto vue</h1>'
},
})
</script>v-bind
A interpolação só funciona no conteúdo da tag. Você não pode usá-lo em atributos. Atributos devem usar v-bind:
No caso abaixo, vou usar o v-bind no atributo src da tag <img> assim, consigo deixar esse valor dinâmico. Isso serve para qualquer atributo.
<div id="primeiros-passos">
<img v-bind:src="imageUrl"/>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vm = new Vue({
el: '#primeiros-passos',
data: {
imageUrl: 'http://hugo.eucurtofusca.com.br/wp-content/uploads/2020/04/Captura-de-Tela-2020-04-02-a%CC%80s-10.16.26-300x300.png'
},
})
</script>O v-bind é tão comum que existe uma sintaxe abreviada para ele, podemos usar apenas os dois pontos antes do atributo veja abaixo.
<div id="primeiros-passos">
<img :src="imageUrl"/>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vm = new Vue({
el: '#primeiros-passos',
data: {
imageUrl: 'http://hugo.eucurtofusca.com.br/wp-content/uploads/2020/04/Captura-de-Tela-2020-04-02-a%CC%80s-10.16.26-300x300.png'
},
})
</script>v-model
Diferente da interpolação, que os dados fluem sempre da sua origem para o template, no v-model a ligação é bidirecional
Num exemplo prático você pode ver um input passando o valor para o código. Vamos de exemplo que fica mais fácil.
<div id="primeiros-passos">
<input v-model="name" placeholder="Informe seu nome">
<p>Meu nome é: {{ name }}</p>
<select v-model="cor">
<option disabled value="">Escolha uma cor</option>
<option>Verde</option>
<option>Amarelo</option>
<option>Vermelho</option>
</select>
<span>Minha cor é: {{ cor }}</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vm = new Vue({
el: '#primeiros-passos',
data: {
name: '',
cor: ''
},
})
</script>No código acima, você vê no html a diretiva v-model recebendo uma propriedade do objeto data. No objeto data essa propriedade está vazia pois queremos os dados iniciais vazios. Porém, ao preencher o input de nome ou selecionar uma cor no select, veremos a mágica acontecer. O valor da propriedade em questão passa a ser o valor digitado e onde colocamos a interpolação com a propriedades, o texto vai aparecer na medida que digitamos. Execute o código acima e faça você mesmo o teste.
Condicionais
Citei la em cima sobre a condição ternária que poderia ser aplicada dentro da interpolação quando necessário. Porém, pode surgir a necessidade de você querer usar uma condição em cima de um bloco de código.
Então vamos conhecer as diretivas v-if, v-else e v-else-if
Elas funcionam da mesma maneira que o famoso if, else e elseif do javascript. Vamos ver na prática.
Neste primeiro exemplo, vamos fazer um v-if se existir valor na propriedade imageUrl. Então nosso código vai exibir o primeiro bloco.
<div id="primeiros-passos">
<div v-if="imageUrl">
<img :src="imageUrl"/>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vm = new Vue({
el: '#primeiros-passos',
data: {
imageUrl: 'http://hugo.eucurtofusca.com.br/wp-content/uploads/2020/04/Captura-de-Tela-2020-04-02-a%CC%80s-10.16.26-300x300.png'
},
})
</script>No nosso primeiro exemplo, temos valor na propriedade imageUrl, então o bloco é executado.
No segundo exemplo, vamos colocar um bloco de v-else para quando não tiver valor na propriedade imageUrl. E para o exemplo funcionar vamos remover o valor de imageUrl deixando como null.
<div id="primeiros-passos">
<div v-if="imageUrl">
<img :src="imageUrl"/>
</div>
<div v-else>
<p>Não temos imagem</p>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const vm = new Vue({
el: '#primeiros-passos',
data: {
imageUrl: null
},
})
</script>Neste caso, como não temos imageURL, o bloco com a mensagem “Não temos imagem” é exibido.
Considerações finais
Este post foi feito para quem está iniciando e não entende nada sobre como funciona o Vue.js
Lembrando que foi feito baseado nos meus conhecimentos, então podem ter coisas que não foram apresentadas por esquecimento meu ou por não conhecer totalmente.
De qualquer forma, espero ter ajudado você a entender um pouco sobre o vue.js
Caso queira acrescentar algo ou tirar alguma dúvida, deixe seu comentário abaixo. Será um prazer responder e poder te ajudar. Lembre de preencher seu email para que eu possa te enviar um email com a resposta.
Abraços