Sintaxis de Plantilla

Texto y Expresiones

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

Directivas

{{ expr }}	Interpolación de texto
v-bind:attr / :attr	Enlazar atributo a expresión
v-on:event / @event	Adjuntar escuchador de evento
v-model	Enlace bidireccional (formularios)
v-if / v-else-if / v-else	Renderizado condicional
v-show	Alternar CSS de visualización (permanece en DOM)
v-for	Renderizado de lista
v-slot / #name	Contenido de slot con nombre

Enlace de Atributos

Reactividad

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()	Cualquier tipo; acceder via `.value` en script
reactive()	Solo objetos/arreglos; acceso directo a propiedades
Template	Ambos se desenvuelven automáticamente (sin `.value`)
Destructure	`reactive` pierde reactividad; usar `toRefs()`

Computed y Watchers

Propiedades Computed

import { ref, computed } from 'vue'

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

Los valores computed se almacenan en caché y solo se revalúan cuando cambian sus dependencias

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}`)
})

Opciones de Watch

immediate: true	Ejecutar callback inmediatamente al crear
deep: true	Observar objetos anidados profundamente
flush: 'post'	Ejecutar después de actualización del DOM
once: true	Disparar solo una vez y detenerse

Componentes

Componente de Archivo Único (SFC)

Registrar Componentes

Bloques SFC

<script setup>	API de composición (recomendado)
<template>	Plantilla HTML
<style scoped>	CSS con alcance de componente
<style module>	Módulos CSS (objeto $style)

Props y Eventos

Definir Props

Emitir Eventos

Uso en Padre

v-model en Componentes

Slots

Slot Predeterminado

Custom content here

Slots con Nombre

Main content

Slots con Alcance

API de Composición

Función 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 }
}

Usar 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)

Definiciones de Ruta

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

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

Navegación en Plantilla

Home

  User 1

Navegación 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)

Características de Ruta

/user/:id	Segmento dinámico (`route.params.id`)
name: 'user'	Ruta con nombre para navegación programática
children: [...]	Rutas anidadas
beforeEnter	Guarda de navegación por ruta
meta: { auth: true }	Metadatos personalizados para guardas
redirect: '/new-path'	Redirección de ruta

Hooks de Ciclo de Vida

Orden de Hooks

onBeforeMount	Antes del renderizado inicial del DOM
onMounted	DOM listo (obtener datos, añadir escuchadores)
onBeforeUpdate	Antes de que el estado reactivo rerenderice el DOM
onUpdated	Después del rerenderizado del DOM
onBeforeUnmount	Antes de que el componente sea destruido
onUnmounted	Limpieza (eliminar escuchadores, temporizadores)

Uso

Listas y Condicionales

v-for

  {{ item.name }}

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

  {{ key }}: {{ val }}

Siempre usar :key con v-for para actualizaciones eficientes del DOM

v-if vs v-show

v-if	Renderizar condicionalmente (añadir/eliminar del DOM)
v-else-if	Cadena else-if
v-else	Rama de respaldo
v-show	Alternar `display: none` (permanece en DOM)

Usar v-show para alternancias frecuentes, v-if para cambios poco frecuentes

Ejemplo de Condicionales

Loading...
Error!
{{ data }}

Manejo de Formularios

Fundamentos de v-model

Modificadores de v-model

v-model.lazy	Sincronizar en `change` en lugar de `input`
v-model.number	Auto-convertir a número
v-model.trim	Auto-eliminar espacios en blanco

Modificadores de Evento

@click.prevent	Llamar `preventDefault()`
@click.stop	Llamar `stopPropagation()`
@click.once	Disparar como máximo una vez
@keyup.enter	Solo en tecla Enter
@submit.prevent	Prevenir envío predeterminado del formulario

REFERENCIA RÁPIDA DE VUE.JS

Title