Dark mode
Light mode
04 Jun 17
4 min

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, mas o que é um framework progressivo?O Leitor

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

1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Hello World - Vue.js 2</title> 6 </head> 7 <body></body> 8</html>

Aí importamos o Vue.js na nossa página, para podermos utilizá-lo.

1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Hello World - Vue.js 2</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body></body> 9</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.

1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Hello World - Vue.js 2</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body> 9 <div id="app"></div> 10 </body> 11</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.
1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Hello World - Vue.js 2</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body> 9 <div id="app"></div> 10 <script type="text/javascript"> 11 new Vue({ 12 el: "#app", 13 }) 14 </script> 15 </body> 16</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.

1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Hello World - Vue.js 2</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body> 9 <div id="app"></div> 10 <script type="text/javascript"> 11 new Vue({ 12 el: "#app", 13 data: { 14 message: "Hello World!", 15 }, 16 }) 17 </script> 18 </body> 19</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.

1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Hello World - Vue.js 2</title> 6 <script src="https://unpkg.com/vue"></script> 7 </head> 8 <body> 9 <div id="app"></div> 10 <script type="text/javascript"> 11 new Vue({ 12 el: "#app", 13 data: { 14 message: "Hello World!", 15 }, 16 }) 17 </script> 18 </body> 19</html>

Salva, abre a página, e pronto!

Screenshot do resultado do Hello World em Vue.js

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.

Compartilhe

Foto de Thiago sorrindo

Autor

Thiago Rossener

Desenvolvedor front-end, filósofo e espiritualista

Sua assinatura não pôde ser validada.
Você fez sua assinatura com sucesso.

Newsletter

Assinando minha newsletter você fica sabendo sempre que eu publicar algo novo, prometo que vai ser só isso.

Comentários