Vamos criar nosso primeiro Hello World com o Vue.js. Existe forma melhor de iniciar o conhecimento em alguma linguagem ou framework?

Vou demonstrar como criar uma aplicação simples um passo a passo para entender como este framework funciona.

Caso não tenha acompanhado o que já falamos sobre, recomendo a leitura do artigo Vue.Js – Iniciando com o Framework.

Então, mão à obra e vamos codificar!

Vamos criar o arquivo HTML com a estrutura inicial do Vue.js

Vamos criar um arquivo primeiroAppVue.html e abrir o Visual Studio Code para editar o arquivo e digitar as seguintes linhas de códigos:

Caso prefira, é só copiar o código abaixo:

Até o momento não criamos nada muito visual, tanto que se abrir o arquivo irá visualizar algo semelhante a pagina abaixo com a mensagem ‘Hello’.

Entendimento da estrutura

Entendendo a estrutura, temos a mais enxuta página possível para entendimento. Você terá um elemento que irá renderizar nossa aplicação e nele estarão tudo o que for injetado na função Vue().

No exemplo, definimos os dados no atributo data() e criamos uma propriedade mensagem, para receber o valor que gostaríamos de exibir.

Simples não? Os fontes deste exemplo e outros da série de artigos sobre o Vue que divulgo aqui no site você encontra aqui neste repositório do GitHub com projeto completo do VueJs.

Iremos nos próximos artigos demonstrar mais recursos do framework, então até a próxima!