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.
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!
