Instalando Vue.js e aprendendo sobre reatividade

Você sabe o que é um Vue.js? Vue.js é um framework javascript, de código aberto, e que se tornou muito famoso na criação de componentes reativos para interfaces web.

Considerado moderno e flexível, ele se destaca pela simplicidade e por uma boa performance, inclusive em aplicativos móveis.

Mas, afinal, como ele funciona? Nessa primeira aula, você aprenderá a instalá-lo e, acima de tudo, vai compreender o que é a reatividade que tanto se fala nesse contexto.

Confira no texto abaixo, mas se você é daqueles que gosta de vídeos… Boooom 💥 Confira o vídeo dessa aula.

Só não se esqueça de se inscrever no canal e mandar aquele like bonitão.

Play Video

O passo a passo para a instalação

O primeiro passo é criar um arquivo HTML basicão. Depois, é preciso fazer a instalação do Vue.js adicionando simplesmente o pacote dentro da tag script. Apenas isso será o suficiente para instalar de forma simples e prática.

    
        <!DOCTYPE html>
         <html lang="en">
         <head>
             <meta charset="UTF-8">
             <title>Aula 01 - Vue.js do jeito ninja</title>
         </head>
         <body>
            <script src="https://unpkg.com/vue"></script>
         </body>
         </html>
    

Agora, vamos instanciar o Vue.js para que ele funcione corretamente na sua estrutura de componentes que é tipo uma pirâmide, e é exatamente isso que será feito a partir agora.

Calma meu jovem, você irá entender mais a fundo sobre componentes e a estrutura completa to Vue.js nas próximas aulas.

Para isso, é necessário criar uma nova tag script e, dentro dela, criar uma variável para pendurar a instância do Vue.js (vou explicar por que é necessário e interessante pendurar em uma variável global no final deste artigo). Dentro da instância do Vue.js, nós colocaremos todas as configurações necessárias para a nossa aplicação:

    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Aula 01 - Vue.js do jeito ninja</title>
        </head>
        <body>
            <script src="https://unpkg.com/vue"></script>
        
            <script>
                var app = new Vue();
            </script>
        </body>
        </html>
    

O Vue.js precisa de dois elementos basicamente obrigatórios para funcionar: o el, onde será definido o elemento pai do aplicativo, e o data, onde ficarão as variáveis:

    
        var app = new Vue({
            el: '#app',
            data: {}
        });
    

Para que isso funcione, o el precisa receber o id do elemento pai da sua aplicação, #app no nosso caso. É importante ter em mente que o Vue.js só interpreta o que está dentro dessa div que acabamos de declarar com o id #app. Então, todo o conteúdo da sua aplicação tem que de fato estar dentro dela, caso contrário, o conteúdo não será interpretado pelo Vue.js e será renderizado como um conteúdo HTML normal.

Com os passos acima, o nosso aplicativo Vue.js basicão já começa a funcionar, o que só salienta o quanto Vue.js é realmente simples 😎.

O que é a Reatividade?

Depois de instalar o Vue.js, é preciso entender sobre a Reatividade. Esse conceito consiste em dizer que tudo o que é produzido ou alterado no Vue.js será reativo, como uma reação em cadeia. Assim, por exemplo, quando uma variável do data é alterada, todo os locais que essa variável estiver sendo impressa serão atualizadas instantaneamente, não é interessante? Sim, isso mesmo, o Vue.js vai fazer uma “atualização global” do conteúdo daquela variável.

Agente pendurou a instancia do Vue.js numa variável app pelo simples motivo de poder acessar externamente suas propriedades. Faça um teste, abra o console e digite app e verás a instancia do Vue.js

Se essa aula foi importante e te ajudou a compreender o início do Vue.js, então não deixe de acompanhar a próxima etapa para para ficar ninja no Vue.js.

Próximo capítulo O que são diretivas no Vue.js?​