O Vue.js 3 é um framework JavaScript progressivo para criar interfaces dinâmicas e aplicações de página única (SPA). Ele é fácil de integrar em projetos existentes e oferece uma curva de aprendizado suave, sendo ideal para iniciantes e desenvolvedores experientes.

A versão 3 traz melhorias em performance, novas APIs como o Composition API e maior suporte a TypeScript.

​
Estrutura Básica de um Componente

Um componente Vue básico:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Clique aqui</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "Olá, Vue.js 3!",
      };
    },
    methods: {
      changeMessage() {
        this.message = "Você clicou no botão!";
      },
    },
  };
</script>

<style scoped>
  button {
    background-color: #42b983;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
  }
</style>

​
Funcionalidades Principais

​
Reatividade com ref e reactive

O Composition API usa ref e reactive para gerenciar estados reativos:

import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({ message: "Olá, Vue 3!" });

    function increment() {
      count.value++;
    }

    return { count, state, increment };
  },
};

No template:

<div>
  <p>{{ count }}</p>
  <button @click="increment">Adicionar</button>
</div>

​
Diretivas no Template

Manipule o DOM com diretivas:

  • v-if e v-else: Renderizam condicionalmente.
  • v-for: Itera sobre listas.
  • v-bind: Vincula atributos dinamicamente.
  • v-on: Escuta eventos.

Exemplo:

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <button @click="addItem">Adicionar Item</button>
</template>

<script>
  export default {
    data() {
      return { items: [{ id: 1, name: "Item 1" }] };
    },
    methods: {
      addItem() {
        const id = this.items.length + 1;
        this.items.push({ id, name: `Item ${id}` });
      },
    },
  };
</script>

​
Trabalhando com Componentes

Divida sua aplicação em componentes reutilizáveis.

Componente Pai:

<template>
  <div>
    <ChildComponent :title="message" @update="updateMessage" />
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue';

  export default {
    components: { ChildComponent },
    data() {
      return { message: "Mensagem do Pai" };
    },
    methods: {
      updateMessage(newMessage) {
        this.message = newMessage;
      },
    },
  };
</script>

Componente Filho (ChildComponent.vue):

<template>
  <div>
    <h2>{{ title }}</h2>
    <button @click="$emit('update', 'Nova Mensagem do Filho')">Atualizar</button>
  </div>
</template>

<script>
  export default { props: ['title'] };
</script>

O Vue.js 3 é flexível e poderoso, ideal para criar interfaces dinâmicas e interativas. Para mais detalhes, consulte a documentação oficial do Vue.js.