O que é Vue.js? Criando a Primeira Aplicação

Vue.js é um framework JavaScript progressivo que pode ser usado para a construção de interfaces de usuário(UI) e aplicações de página única (SPA, ou Single Page Applications).

Criado por Evan You em 2014, o Vue.js combina simplicidade, desempenho e uma curva de aprendizado acessível. Ele se destaca por sua abordagem reativa, que facilita a vinculação de dados e a atualização automática da interface do usuário em resposta a alterações no estado da aplicação.

Principais Características do Vue.js

O Vue.js foi projetado para ser incrementável, o que significa que você pode usá-lo de forma simples em um único componente ou aproveitar suas funcionalidades mais avançadas em projetos maiores. Algumas de suas principais características incluem:

Reatividade de dados: O Vue.js monitora automaticamente alterações no estado da aplicação e atualiza a interface do usuário em tempo real.
Componentização: A estrutura é baseada em componentes reutilizáveis, que ajudam a organizar o código e tornam a manutenção mais eficiente.
Diretivas declarativas: Oferece ferramentas como v-if, v-for e v-model para lidar com o DOM de maneira simples e expressiva.
Virtual DOM: O Vue.js utiliza uma versão leve do DOM, conhecida como Virtual DOM, para melhorar o desempenho das aplicações, evitando manipulações desnecessárias do DOM real.
Ecossistema robusto: O Vue possui uma ampla gama de ferramentas e bibliotecas complementares, como Vue Router para roteamento e Vuex para gerenciamento de estado.
Integração fácil: Pode ser integrado a projetos existentes de forma incremental, sem a necessidade de reestruturar todo o código.

Options API e Composition API

Existem duas formas principais de organizar o código em um componente Vue: Options API e Composition API. O Options API é a abordagem mais intuitiva para iniciantes, enquanto a Composition API é mais flexível e modular, que permite organizar a lógica do componente em funções reutilizáveis.

Neste tutorial, utilizaremos o Options API por ser mais intuitiva e ter uma curva de aprendizado mais suave. Quando você estiver mais familiarizado com o Vue.js, poderá explorar a Composition API para abrir novas possibilidades de organização e reutilização de código.

Criando a Primeira Aplicação com Vue.js

Neste tutorial, utilizaremos o Vue.js por meio de um CDN para simplificar a configuração e permitir que você veja o framework em ação rapidamente. No entanto, para projetos reais ou mais complexos, o uso do gerenciador de pacotes npm é recomendado. Isso porque o npm facilita a instalação de dependências, a configuração de scripts personalizados e a organização do código em módulos.

Com o CDN, o Vue.js é carregado diretamente na página web por meio de um link como este:

<script src="https://unpkg.com/vue"></script>

Por outro lado, ao usar o npm, você pode instalar o Vue.js em seu projeto com o seguinte comando:

npm install vue

Essa abordagem é especialmente útil em projetos reais, onde você pode integrar o Vue.js com ferramentas modernas de build como Webpack ou Vite.

A seguir, apresentaremos um exemplo de como criar uma aplicação Vue.js simples usando o CDN. Este exemplo demonstra como o framework pode ser usado para lidar com entrada de dados do usuário e exibir informações na interface.

<!DOCTYPE html>
<html>
  <head>
    <title>Introdução ao Vue.js</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
      <input type="text" v-on:input="setMessage" />
      <p>{{ message }}</p>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            message: "Bem-vindo ao Vue.js!",
          };
        },
        methods: {
          setMessage(event) {
            this.message = event.target.value;
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>

Neste exemplo, o método Vue.createApp é usado para inicializar a aplicação Vue. Ele recebe como argumento um objeto que define os dados (propriedade data) e os métodos (propriedade methods) que serão utilizados na aplicação.

Na propriedade data, é retornado um objeto contendo a variável reativa message, que será exibida na página:

data() { return { message: 'Bem-vindo ao Vue.js!' }; }

A exibição do valor da propriedade message é feita na interface HTML por meio da sintaxe de interpolação ``. Para permitir a interação com o conteúdo de um campo de texto, a diretiva v-on:input vincula o evento de entrada ao método setMessage, definido na propriedade methods:

methods: { setMessage(event) { this.message = event.target.value; } }

O método setMessage é ativado sempre que o usuário digita algo no campo de texto. Ele recebe um objeto de evento como parâmetro, acessa o valor digitado por meio de event.target.value e o atribui à propriedade message. Como o Vue é reativo, essa mudança é automaticamente refletida na interface.

Por fim, o método mount conecta a aplicação Vue a um elemento HTML específico identificado pelo seletor CSS:

.mount('#app');

Ao abrir a página no navegador, será possível digitar no campo de texto e ver a mensagem exibida na página ser atualizada em tempo real.

Exemplo de aplicação Vue.js com campo de texto e mensagem exibida na página

Documentação oficial: