Vue é um framework de desenvolvimento front-end muito popular atualmente, e a cada dia chama a atenção de mais pessoas em virtude de sua curva de aprendizagem baixa em relação a outras tecnologias de desenvolvimento como o React.
Neste artigo, trataremos da configuração básica de uma instância do Vue2; se você está procurando conteúdo acerca do Vue3, dê uma olhada neste artigo sobre as diferenças entre as versões.
O Vue pode ser utilizado de várias maneiras, e a mais simples delas é utilizando uma Vue instante dentro de uma tag <script> em um arquivo HTML.
Antes de tudo, é preciso adicionar uma linha de código de “ativação do Vue” na tag <head> do HTML. Desse modo, pode-se criar uma nova instância do Vue conforme o exemplo abaixo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<script src="<https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js>"></script>
<meta charset="UTF-8">
<title>Aplicação</title>
</head>
<body>
<div id = "conteudo">
<h1>Estou em Vue!!</h1>
</div>
<script>
new Vue({
})
</script>
</body>
</html>
Essa é, em essência, a estrutura mais simples para inserir o Vue no seu arquivo HTML. Porém, para que essa estrutura torne-se realmente funcional, ainda precisamos configurar a instância do Vue.
Se você atentar, perceberá que existe um {} dentro dos parênteses do new Vue(). Isso deve-se ao fato que, como parâmetro, a instância recebe um objeto de configuração, cujos atributos básicos vamos abordar neste artigo.
el
O atributo el do objeto de configuração do Vue indica a tag na qual se aplicará a instância do Vue. Este atributo é obrigatório e, sem ele, o Vue não funcionará. Todos os demais atributos sobre os quais falaremos neste artigo e recursos do Vue estarão disponíveis para a tag referenciada no atributo el, bem como suas tags filhas.
O valor do atributo el deve referenciar um seletor CSS da tag HTML, preferencialmente um id, assim como no seguinte exemplo, que aplica a instância ao elemento que possui o id “conteudo”:
new Vue({
el:"#conteudo"
})
data
O atributo data do Vue é opcional e referencia um objeto que contém todos os dados da instância, isto é: as informações que podemos utilizar no HTML e que estão atreladas ao Vue, como no exemplo abaixo.
new Vue({
el:"#conteudo"
data:{
Nome: "Fulano"
Sobrenome: "Silva"
}
})
computed
O atributo computed é opcional e serve para definir propriedades, assim como o atributo data. No entanto, as propriedades definidas como computed tem seus valores armazenados na cache do navegador, e mudanças nessa cache só acontecerão quando houverem alterações no atributo definido em computed. É importante dizer também que um atributo computed não é declarado na propriedade data.
Por padrão, as propriedades computadas também sofrem alterações “por baixo dos panos” por terem uma propriedade get e set padrão. Assim, apesar de parecer que acessamos esta propriedade diretamente, seu acesso dá-se pelos métodos get e set, mesmo que estes não estejam explícitos.
Porém, caso queira, é possível explicitar a definição dos métodos get e set da propriedade, e nestes métodos você pode fazer validações, modificações ou qualquer outra operação que julgue necessária com os dados antes deles serem efetivamente salvos na Vue instance ou retornados para o usuário, como no exemplo abaixo:
new Vue({
el:"#conteudo"
data:{...},
computed:{
dia:{//Definição de getter e setter
get: function(){
return `Hoje é dia ${this.dia}`
},
set: function(diaAtual){
if(diaAtual >= 1 && diaAtual <= 31){
this.dia = diaAtual
} else {
this.dia = 1
}
}
},
mes:{//definição de setter
set: function(mesAtual){
if(mesAtual >= 1 && mesAtual <=12){
this.mes = mesAtual
} else {
this.mes = 12
}
}
},
ano,//Sem definição de getter e setter
}
})
methods
O atributo methods é opcional e se configura como um objeto que serve para guardar os métodos referentes àquela instância do Vue. O objeto methods é composto de vários atributos, sendo que cada um deles recebe uma função, similarmente a esse exemplo:
new Vue({
el:"#conteudo"
data:{...},
computed:{...},
methods:{
imprimeData: function() {...},
imprimeDataEHora: function(hora){...}
},
}
watch
O atributo watch é opcional; assim como o atributo computed, monitora alterações em uma variável. Este atributo é particularmente útil quando é necessário realizar operações complexas ou assíncronas antes da alteração dos dados.
Watch monitora a alteração de um dado já definido na propriedade data, e, quando uma alteração é feita neste dado, executa uma função que recebe como parâmetros o valor anterior e o valor atual daquele elemento monitorado.
Essa função deve estar associada a um atributo de watch que possui o mesmo nome do atributo que ela monitora, assim como pode ser visto no exemplo que segue:
new Vue({
el:"#conteudo"
data:{
dia: 12
},
computed:{...},
methods:{...},
watch:{
dia: function(diaAnterior, diaAtual){
console.log(`O dia ${diaAnterior} se foi,
agora é dia ${diaAtual}`)
}
}
}
Métodos de ciclo de vida da instância
Uma instância Vue possui vários estados desde sua criação até sua destruição. Consequentemente, existem algumas propriedades específicas que caracterizam os diferentes estados da vida de uma instância do Vue. Essas propriedades são opcionais, e recebem funções que executarão quando a instância do Vue atingir certo ponto do seu ciclo de vida.
As etapas do ciclo de vida de uma Vue instance são:
- beforeCreate: momento antes da criação da instância
- created: momento em que a instância é criada
- beforeMount: momento antes da instância ser atrelada à tag HTML
- mounted: momento em que a instância é atrelada à tag HTML
- beforeDestroy: momento antes da instância ser destruída
- destroyed: momento em que a instância é destruída
A definição desses métodos ocorre assim como nesse caso:
new Vue({
el:"#conteudo"
data:{...},
computed:{...},
methods:{...},
watch:{...},
beforeCreate: function(){...}
created: function(){...}
beforeMount: function(){...}
mounted: function(){...}
beforeDestroy: function(){...}
destroyed: function(){...}
}
Essas são as configurações básicas de uma Vue Instance; se você quer saber mais sobre alguma delas, recomendo a leitura da documentação do Vue, em virtude de a documentação possuir uma versão em português e ser repleta de exemplos para facilitar o seu entendimento.
Bons estudos!!!
