Sintaxe de Template

Texto e Expressões

{{ message }}
{{ count + 1 }}
{{ ok ? 'Yes' : 'No' }}

Diretivas

{{ expr }}	Interpolação de texto
v-bind:attr / :attr	Vincular atributo à expressão
v-on:event / @event	Adicionar ouvinte de evento
v-model	Vinculação bidirecional (formulários)
v-if / v-else-if / v-else	Renderização condicional
v-show	Alternar CSS de exibição (permanece no DOM)
v-for	Renderização de lista
v-slot / #name	Conteúdo de slot nomeado

Vinculação de Atributos

Reatividade

ref (Primitivos)

import { ref } from 'vue'

const count = ref(0)
console.log(count.value)  // 0
count.value++             // reactive update

reactive (Objetos)

import { reactive } from 'vue'

const state = reactive({ count: 0, name: 'Vue' })
state.count++  // no .value needed

ref vs reactive

ref()	Qualquer tipo; acessar via `.value` no script
reactive()	Apenas objetos/arrays; acesso direto às propriedades
Template	Ambos se desempacotar automaticamente (sem `.value`)
Destructure	`reactive` perde reatividade; usar `toRefs()`

Computed e Watchers

Propriedades Computed

import { ref, computed } from 'vue'

const items = ref([1, 2, 3, 4, 5])
const evenItems = computed(() =>
  items.value.filter(n => n % 2 === 0)
)

Valores computed são armazenados em cache e reavaliados apenas quando as dependências mudam

Watchers

import { ref, watch, watchEffect } from 'vue'

const query = ref('')

// Watch specific source
watch(query, (newVal, oldVal) => {
  console.log(`Changed: ${oldVal} → ${newVal}`)
})

// Auto-track dependencies
watchEffect(() => {
  console.log(`Query is: ${query.value}`)
})

Opções de Watch

immediate: true	Executar callback imediatamente ao criar
deep: true	Observar objetos aninhados profundamente
flush: 'post'	Executar após atualização do DOM
once: true	Disparar apenas uma vez e parar

Componentes

Componente de Arquivo Único (SFC)

Registrando Componentes

Blocos SFC

<script setup>	Composition API (recomendado)
<template>	Template HTML
<style scoped>	CSS com escopo do componente
<style module>	CSS Modules (objeto $style)

Props e Eventos

Definindo Props

Emitindo Eventos

Uso no Pai

v-model em Componentes

Slots

Slot Padrão

Custom content here

Slots Nomeados

Main content

Slots com Escopo

Composition API

Função Composable

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  return { x, y }
}

Usando Composables

provide / inject

// Parent
import { provide, ref } from 'vue'
const theme = ref('dark')
provide('theme', theme)

// Descendant (any depth)
import { inject } from 'vue'
const theme = inject('theme', 'light') // default

Router (Vue Router)

Definições de Rota

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/user/:id', component: User },
  ]
})

Navegação no Template

Home

  User 1

Navegação Programática

import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

router.push('/about')
router.push({ name: 'user', params: { id: 1 } })
console.log(route.params.id)

Recursos de Rota

/user/:id	Segmento dinâmico (`route.params.id`)
name: 'user'	Rota nomeada para navegação programática
children: [...]	Rotas aninhadas
beforeEnter	Guarda de navegação por rota
meta: { auth: true }	Metadados personalizados para guardas
redirect: '/new-path'	Redirecionamento de rota

Hooks de Ciclo de Vida

Ordem dos Hooks

onBeforeMount	Antes da renderização inicial do DOM
onMounted	DOM pronto (buscar dados, adicionar ouvintes)
onBeforeUpdate	Antes do estado reativo rerenderizar o DOM
onUpdated	Após rerenderização do DOM
onBeforeUnmount	Antes do componente ser destruído
onUnmounted	Limpeza (remover ouvintes, timers)

Uso

Listas e Condicionais

v-for

  {{ item.name }}

  {{ index }}: {{ item.name }}

  {{ key }}: {{ val }}

Sempre usar :key com v-for para atualizações eficientes do DOM

v-if vs v-show

v-if	Renderizar condicionalmente (adicionar/remover do DOM)
v-else-if	Cadeia else-if
v-else	Ramo de fallback
v-show	Alternar `display: none` (permanece no DOM)

Usar v-show para alternâncias frequentes, v-if para mudanças raras

Exemplo de Condicionais

Loading...
Error!
{{ data }}

Manipulação de Formulários

Básico de v-model

Modificadores de v-model

v-model.lazy	Sincronizar em `change` em vez de `input`
v-model.number	Auto-converter para número
v-model.trim	Auto-remover espaços em branco

Modificadores de Evento

@click.prevent	Chamar `preventDefault()`
@click.stop	Chamar `stopPropagation()`
@click.once	Disparar no máximo uma vez
@keyup.enter	Apenas na tecla Enter
@submit.prevent	Prevenir envio padrão do formulário

REFERÊNCIA RÁPIDA DO VUE.JS

Title