5 min de leitura
Como fazer um Hello World com Vue.js 2
É simples, é rápido, é sensacional.
Esse mês venho fazendo um curso de Vue.js 2 pelo Udemy e me apaixonando cada vez mais por esse framework que reúne o melhor do Angular 1 e do React.
O mais legal é que você não precisa ser nenhum expert em JS, nem ter estudado Angular ou React antes de começar a trabalhar com o Vue, ele é super intuitivo.
Nesse curto tutorial vou te ensinar como dar o primeiro passo para aprender a programar com Vue.js 2. Vamos lá!
O que é o Vue?
Antes de começar, queria explicar rapidinho, afinal, o que é o Vue? Lê-se “viu”.
O Vue.js é um framework progressivo para a construção de interfaces.
Legal Rossener, mas o que é um framework progressivo?
Simples, segundo a definição do próprio Evan You, criador do Vue.js, um framework progressivo é um framework que você pode inserir no seu projeto conforme vai sentindo a necessidade dele.
Ou seja, ao contrário dos frameworks que temos disponíveis hoje, que são recheados de funcionalidades e com uma grande curva de aprendizado, o Vue.js foi feito para ser fácil você adotá-lo em seu projeto, por mais complexo que ele seja.
Agora que você já sabe o que é o Vue.js, vou direto pra prática, como fazer um Hello World usando Vue.js 2?
Como faz?
Primeiro, vamos criar um arquivo HTML qualquer, vou chamá-lo de hello-world-vue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World - Vue.js 2</title>
</head>
<body>
</body>
</html>
Aí importamos o Vue.js na nossa página, para podermos utilizá-lo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World - Vue.js 2</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
</body>
</html>
Então inserimos uma <div>, que será onde a nossa aplicação Vue será montada. Ou seja, o pedaço do HTML que queremos que o Vue.js observe e utilize para renderizar nossos elementos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World - Vue.js 2</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
Agora já podemos começar a escrever o código com o Vue. A primeira coisa a fazer é instanciar uma nova aplicação Vue, dizendo para qual elemento do nosso HTML queremos que ele olhe.
Fazemos isso usando new Vue(), passando como parâmetro a chave el com o valor #app. No caso, o valor é usado como qualquer outro seletor CSS, de preferência sendo o id de um elemento, por ser algo único.
Nota: colocamos o script após o elemento que será utilizado para renderização para que se torne conhecido pelo Vue quando este usar o seletor. Se colocássemos o script no cabeçalho da página, o elemento #app não seria reconhecido.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World - Vue.js 2</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
new Vue({
el: "#app"
});
</script>
</body>
</html>
Vamos fazer a nossa página exibir a mensagem que desejamos. Para isso, colocaremos nossa mensagem no campo data da aplicação Vue.
O campo data recebe um objeto javascript com os dados que serão manipulados no contexto da nossa aplicação, ou seja, os dados de tudo que estiver dentro da nossa <div id="app"></div>.
Vou criar a variável message e atribuir o valor “Hello World!” para que possamos exibir essa mensagem no HTML posteriormente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World - Vue.js 2</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
message: "Hello World!"
}
});
</script>
</body>
</html>
Finalmente, dizemos ao HTML que queremos exibir o conteúdo de “message” na página. Fazemos isso colocando a variável “message” entre duplas chaves {{ }}, que são os caracteres usados pelo Vue para interpolar um valor dentro do HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World - Vue.js 2</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
message: "Hello World!"
}
});
</script>
</body>
</html>
Salva, abre a página, e pronto!
ATUALIZAÇÃO
O Ibrahim Brumate me passou um link muito legal da versão PT-BR da documentação do Vue que eu não sabia que existia! Então se quiser saber mais sobre o Vue em português é só clicar aqui e ser feliz :)
Comentários