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

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