O Vue.js é um framework JavaScript progressivo, amplamente empregado para a criação de interfaces de usuário reativas. Construído sobre os pilares de HTML, CSS e JavaScript, o Vue adota um modelo de programação declarativo e baseado em componentes, facilitando o desenvolvimento eficiente de UIs, desde as mais simples até as mais complexas.

Criado por Evan You em 2014 como um projeto pessoal e evoluindo para um projeto independente impulsionado pela comunidade, o Vue.js é um framework maduro e robusto, testado em inúmeros cenários de produção. Ele se destaca como um dos frameworks JavaScript mais utilizados atualmente, capaz de gerenciar a maioria dos requisitos de aplicações web sem exigir otimizações manuais extensivas, e é perfeitamente adequado para aplicações de grande escala. Uma diferença fundamental em relação a bibliotecas como jQuery é que, enquanto jQuery manipula diretamente o DOM para atualizar a visualização, o Vue.js opera através da manipulação de dados, que então atualiza o DOM de forma reativa.

Veja um exemplo básico de aplicação Vue:

import { createApp, ref } from 'vue';

createApp({
 setup() {
   const currentMessage = ref('Olá, mundo com Vue!');
   const updateMessage = () => {
     currentMessage.value = currentMessage.value === 'Olá, mundo com Vue!' ? 'A mensagem mudou!' : 'Olá, mundo com Vue!';
   };
   return {
     currentMessage,
     updateMessage
   };
 }
}).mount('#my-app');

<div id="my-app">
 <p>{{ currentMessage }}</p>
 <button @click="updateMessage">Alterar Mensagem</button>
</div>

Este exemplo demonstra duas características essenciais do Vue:

• Renderização Declarativa: O Vue estende o HTML padrão com uma sintaxe de template que nos permite descrever a relação entre o HTML final e o estado JavaScript de forma declarativa.
• Reatividade: O Vue monitora automaticamente o estado JavaScript e, quando ocorrem alterações, atualiza o DOM de forma reativa e eficiente.

Diretivas Comuns do Vue

No desenvolvimento com Vue, as diretivas são ferramentas poderosas que nos permitem aproveitar a capacidade de "data-driven" do framework. Abaixo, uma breve descrição das diretivas mais frequentemente utilizadas:

• v-text: Usada para atualizar o conteúdo textual de um elemento vinculado, funcionando de maneira similar ao método text() do jQuery.
• v-html: Permite inserir conteúdo HTML dinamicamente dentro de um elemento, aálogo ao método html() do jQuery.
• v-if: Renderiza um elemento condicionalmente com base na avaliação de uma expressão booleana. Se a expressão for falsa, o elemento e seus filhos não serão incluídos no DOM.
• v-show: Exibe ou oculta um elemento com base em uma expressão booleana, alternando a propriedade CSS display do elemento, mantendo-o no DOM.
• v-for: Utilizado para iterar sobre uma coleção de dados (como um array ou objeto) e renderizar elementos ou templates repetidamente. Por exemplo, se uma lista contém três itens, três instâncias do elemento serão renderizadas, exibindo cada item.
• v-on: Anexa escutadores de evento a elementos. Por exemplo, v-on:click (ou sua abreviação @click) pode ser usado para disparar uma função quando o elemento é clicado.

Conceitos Essenciais de Aprendizagem

1. Sintaxe de Template

O Vue emprega uma sintaxe de template baseada em HTML que oferece robustas capacidades de vinculação de dados. Isso nos permite ligar de forma declarativa os dados da instância do componente ao DOM renderizado. Todos os templates Vue são HTML sintaticamente válidos e podem ser interpretados por qualquer nvaegador ou parser HTML compatível. Com o uso de chaves duplas ({{ }}) e diretivas (como v-if, v-for, v-bind), a exibição dinâmica de dados e a interação são facilitadas.

Internamente, o Vue compila esses templates em código JavaScript altamente otimizado. Em conjunto com seu sistema de reatividade, o Vue consegue determinar inteligentemente o número mínimo de componentes que precisam ser renderizados novamente e aplicar o menor número possível de operações DOM quando o estado da aplicação muda.

<div id="app-template">
 <p>{{ presentationText }}</p>
 <button @click="toggleText">Alternar Texto</button>
</div>

As chaves duplas serão substituídas pelo valor da propriedade presentationText da instância do componente correspondente. Essa exibição é atualizada automaticamente sempre que a propriedade presentationText é modificada.

O Vue permite o uso de expressões JavaScript completas em todas as vinculações de dados:

{{ totalItems + 5 }}

{{ isActive ? 'Ativo' : 'Inativo' }}

{{ productName.toUpperCase() }}

<section :class="`item-${itemId}`"></section>

Essas expressões são avaliadas como JavaScript, no escopo da instância do componente atual.

Dentro dos templates Vue, expressões JavaScript podem ser usadas nos seguintes contextos:

• Em interpolações de texto (dentro das chaves duplas).
• Nos valores de atributos de qualquer diretiva Vue (atributos que começam com v-).

Apenas Expressões Simples são Suportadas

Cada vinculação suporta apenas uma **única expressão**, ou seja, um pedaço de código JavaScript que pode ser avaliado. Uma maneira fácil de verificar é se o código pode ser legalmente escrito após um return.

Portanto, os seguintes exemplos são **inválidos**:

<!-- Isso é uma instrução, não uma expressão -->
{{ var currentCount = 0 }}

<!-- Controle condicional direto não é suportado, use o operador ternário -->
{{ if (isLogged) { return userName } }}

Chamando Funções

É possível invocar métodos expostos pelo componente na expressão vinculada:

<span :title="formatForTooltip(eventDate)">
 {{ displayShortDate(eventDate) }}
</span>

2. Desenvolvimento Baseado em Componentes

A arquitetura baseada em componentes é um dos grandes destaques do Vue.js. Ao segmentar uma página em componentes autônomos, cada um com seu próprio estado e lógica, a manutenção e a reutilização do código são significativamente aprimoradas. Em aplicações práticas, os componentes são frequentemente organizados em uma estrutura hierárquica, semelhante a uma árvore aninhada de elementos HTML. O Vue implementa seu próprio modelo de componentes, permitindo encapsular conteúdo e lógica personalizados dentro de cada um, e também funciona bem com Web Components nativos.

Definindo um Componente

Quando se utiliza um processo de build, os componentes Vue são comumente definidos em arquivos .vue separados, conhecidos como Single File Components (SFCs).

<script setup>
import { ref } from 'vue';

const statusMessage = ref('Status: Inicial');
const toggleStatus = () => {
 statusMessage.value = statusMessage.value === 'Status: Inicial' ? 'Status: Ativo' : 'Status: Inicial';
};
</script>

<template>
 <div @click="toggleStatus" style="cursor: pointer; border: 1px solid #ccc; padding: 10px;">
   {{ statusMessage }}
 </div>
</template>

Quando não há um processo de build, um componente Vue pode ser definido como um objeto JavaScript que contém opções específicas do Vue:

import { ref } from 'vue';

export default {
 setup() {
   const dynamicText = ref('Texto Dinâmico');
   const changeText = () => {
     dynamicText.value = dynamicText.value === 'Texto Dinâmico' ? 'Novo Texto Exibido' : 'Texto Dinâmico';
   };
   return { dynamicText, changeText };
 },
 template: `
   <p @click="changeText" style="cursor: pointer;">{{ dynamicText }}</p>
 `
};

Neste caso, o template é uma string JavaScript embutida que o Vue compila em tempo de execução.

Para usar um componente filho, é necessário importá-lo no componente pai. Supondo que tenhamos o componente de exibição de status no arquivo StatusDisplay.vue, ele seria exposto como uma exportação padrão.

<script setup>
import StatusDisplay from './StatusDisplay.vue';
</script>

<template>
 <h2>Exemplo de Componente Filho</h2>
 <StatusDisplay />
</template>

Com <script setup>, os componentes importados ficam imediatamente disponíveis para uso no template.

É importante notar que um componente pode ser registrado globalmente, permitindo seu uso em qualqeur outro componente da aplicação sem a necessidade de importação explícita. A discussão sobre os prós e contras do registro global versus local é abordada em profundidade na documentação de registro de componentes.

Os componentes são inerentemente reutilizáveis e podem ser empregados múltiplas vezes:

<h3>Múltiplas Instâncias do Componente</h3>
<StatusDisplay />
<StatusDisplay />
<StatusDisplay />