VueJS - Introdução

Vueé uma estrutura JavaScript para construir interfaces de usuário. Sua parte central está focada principalmente na camada de visualização e é muito fácil de entender. A versão do Vue que usaremos neste tutorial é 2.0.

Como o Vue é basicamente construído para o desenvolvimento de front-end, vamos lidar com muitos arquivos HTML, JavaScript e CSS nos próximos capítulos. Para entender os detalhes, vamos começar com um exemplo simples.

Neste exemplo, vamos usar a versão de desenvolvimento de vuejs.

Exemplo

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <h1>{{ message }}</h1>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'My first VueJS Task'
            }
         });
      </script>
   </body>
</html>

Resultado

Este é o primeiro aplicativo que criamos usando o VueJS. Como visto no código acima, incluímos vue.js no início do arquivo .html.

<script type = "text/javascript" src = "js/vue.js"></script>

Há um div que é adicionado ao corpo que imprime “My first VueJS Task” no navegador.

<div id = "intro" style = "text-align:center;">
   <h1>{{ message }}</h1>
</div>

Também adicionamos uma mensagem em uma interpolação, ou seja, {{}}. Este interage com o VueJS e imprime os dados no navegador. Para obter o valor da mensagem no DOM, estamos criando uma instância de vuejs da seguinte maneira -

var vue_det = new Vue({
   el: '#intro',
   data: {
      message: 'My first VueJS Task'
   }
})

No trecho de código acima, estamos chamando a instância Vue, que leva o id do elemento DOM, ou seja, e1: '# intro', é o id do div. Existem dados com a mensagem à qual é atribuído o valor‘My first VueJS Task’. VueJS interage com DOM e altera o valor no DOM {{mensagem}} com’My first VueJS Task’.

Se acontecer de alterarmos o valor da mensagem no console, o mesmo será refletido no navegador. Por exemplo -

Detalhes do console

No console acima, imprimimos o objeto vue_det, que é uma instância de Vue. Estamos atualizando a mensagem com“VueJs is interesting” e o mesmo é alterado no navegador imediatamente, conforme visto na imagem acima.

Este é apenas um exemplo básico que mostra a vinculação do VueJS com o DOM e como podemos manipulá-lo. Nos próximos capítulos, aprenderemos sobre diretivas, componentes, loops condicionais, etc.