O Vue.js é 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.

​
Criando Arquivos Vue

Para criar um arquivo Vue no editor de código:

  1. Acesse uma no menu lateral.
  2. Clique em Adicionar arquivo.
  3. Selecione a extensão Vue, nomeie o arquivo e clique em Adicionar arquivo.

Os arquivos Vue são automaticamente compilados em Javascript e importados na página, prontos para uso.

​
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!",
        };
    },
    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

O Vue usa a função data para gerenciar propriedades reativas:

export default {
    data() {
        return {
            count: 0,
        };
    },

    methods: {
        increment() {
            this.count++;
        },
    },
};

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 é flexível e poderoso, ideal para criar interfaces dinâmicas e interativas. Para mais detalhes, consulte a documentação oficial do Vue.js.