Manual Vue.js

1. Conceitos Básicos

• Vue.js: Framework JavaScript progressivo para construir interfaces de usuário reativas.
• Componentes: Blocos reutilizáveis da interface.
• Reatividade: Alterações nos dados refletem automaticamente na UI.
• Vue Instance: Base da aplicação Vue.

2. Criando Projeto Vue

• Com Vite (recomendado):

npm create vite@latest meu-app
cd meu-app
npm install
npm run dev

• Com Vue CLI:

npm install -g @vue/cli
vue create meu-app
cd meu-app
npm run serve

3. Estrutura Básica de Componente

<template>
  <div>
    <h1>{{ mensagem }}</h1>
    <button @click="clicar">Clique aqui</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mensagem: "Olá, Vue!"
    };
  },
  methods: {
    clicar() {
      this.mensagem = "Você clicou!";
    }
  }
};
</script>

<style scoped>
h1 { color: blue; }
</style>

4. Diretivas Vue

• v-bind → liga atributo a uma expressão

<img v-bind:src="imagemURL">