4️⃣ VueJS

¿Qué es Vue.js?

Vue.js es un framework progresivo para construir interfaces de usuario y aplicaciones web interactivas. Es especialmente popular por su facilidad de integración y su enfoque en ser reactivo y componentizado. Esto significa que puedes agregar Vue a una página web existente sin complicaciones o construir aplicaciones completas usando su poderoso sistema de componentes.

🧺 Características clave de Vue.js:

Enlace de datos bidireccional (Two-way data binding):
Vue permite que los datos en tu modelo se sincronicen automáticamente con la vista (lo que ves en la interfaz de usuario) y viceversa. Esto se logra a través de directivas como v-model.
Componentes:
Vue está basado en un sistema de componentes. Un componente es una pieza reutilizable de la interfaz de usuario que tiene su propia lógica y estilo.
Los componentes permiten dividir la UI en partes pequeñas y fáciles de manejar, lo que mejora la mantenibilidad y la escalabilidad.
Directivas:
Las directivas son instrucciones especiales en el HTML que agregan comportamiento a los elementos del DOM. Por ejemplo, v-if para condiciones, v-for para bucles, o v-bind para vincular atributos.
Reactividad:
Vue.js observa las propiedades de los datos y actualiza la interfaz de usuario automáticamente cuando los datos cambian. No necesitas manipular manualmente el DOM cuando los datos cambian.
Enrutamiento y manejo de estados:
Vue también ofrece herramientas como Vue Router para manejar rutas y navegación, y Vuex para manejar el estado global de la aplicación en aplicaciones más complejas.

🥅 Estructura básica

Todo archivo de VueJS tiene como extensión .vue y su código básico está dividio en 3 bloques principales:

🟡 script · En este bloque ubicaremos toda la lógica, hecha con JavaScript, que usaremos en el componente.

🟢 template · Este bloque se encarga de formar la estructura HTML de nuestro componente.

🔵 style · En este último bloque escribiremos el código CSS de nuestro componente

🔰App.vue

<script setup>
import { ref } from 'vue'

const message = ref("¡Hola desde Vue.js!")
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

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

🔢 Variables

En Vue 3, las variables se definen dentro del bloque <script setup> utilizando ref() o reactive() para que sean reactivas. Estas variables reactivas almacenan datos que luego pueden mostrarse en la interfaz de usuario.

Gracias al sistema de reactividad de Vue 3, cuando el valor de una variable cambia, la vista se actualiza automáticamente sin necesidad de manipulación manual del DOM. Esto permite crear interfaces dinámicas y fáciles de mantener.

1. Definiendo Variables

Las variables en Vue se definen dentro de la función data, que devuelve un objeto con todas las propiedades (o variables) que quieres usar en tu componente.

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref("¡Hola Mundo!")
</script>

Explicación del código

message es una variable definida dentro de data.
Esta variable contiene el valor "¡Hola Mundo!".
En el bloque <template>, usamos la sintaxis {{ message }} para mostrar el valor de la variable en la interfaz.

2. Usando las Variables en la Plantilla

Una vez que defines una variable en data, puedes usarla dentro de la plantilla HTML del componente para mostrarla en la página. Vue automáticamente actualiza la vista si el valor de la variable cambia.

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref("¡Bienvenidos a Vue.js!")
</script>

Explicación del código

Usamos {{ message }} dentro de la etiqueta <p>. Esto hará que el valor de message se muestre en la página.
Si el valor de message cambia, Vue se encarga de actualizar automáticamente la interfaz sin que tengas que hacer nada más.

3. Variables con Diferentes Tipos de Datos

Las variables en Vue pueden ser de diferentes tipos de datos, como cadenas de texto (strings), números, booleanos (true/false), listas (arrays) y objetos.

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ count }}</p>
    <p>{{ isActive }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref("¡Hola desde Vue!")
const count = ref(5)
const isActive = ref(true)
</script>

Explicación del código

message es una cadena de texto.
count es un número.
isActive es un valor booleano (true o false).

🔥🔥 Puedes mostrar cualquiera de estas variables en el HTML de la misma manera usando {{ variable }}.

💭 Métodos o funciones

En Vue.js, las funciones o métodos son una parte esencial del componente para manejar la lógica. Puedes definirlas dentro de la opción methods del componente. Estas funciones pueden realizar tareas como procesar eventos, manipular datos, o interactuar con la interfaz del usuario.

Definir y Usar Métodos

Definición
Los métodos se declaran dentro de la propiedad methods de un componente Vue.
Uso en la plantilla (template)
Puedes llamarlos en la plantilla a través de directivas como v-on, o utilizarlos dentro de otras expresiones en el template.

Ejemplo Básico"

<template>
  <div>
    <h1>Hola, {{ nombre }}</h1>
    <button @click="saludar">Saludar</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const nombre = ref("Mundo")

const saludar = () => {
  alert(`¡Hola, ${nombre.value}!`)
}
</script>

👉🏻 Explicación del código:

La función saludar se define en methods.
Al hacer clic en el botón, se ejecuta gracias a la directiva v-on:click (abreviada como @click).

Métodos con Argumentos

Los métodos pueden aceptar argumentos si los pasas desde la plantilla.

<template>
  <div>
    <button @click="mostrarMensaje('¡Hola!')">Mostrar Mensaje</button>
  </div>
</template>

<script setup>
const mostrarMensaje = (mensaje) => {
  alert(mensaje)
}
</script>

👉🏻 Explicación:

El método mostrarMensaje toma un argumento mensaje y lo muestra en una alerta.

Acceso a Datos y Otras Propiedades

Los métodos pueden acceder a las propiedades definidas en data, computed, o incluso invocar otros métodos, utilizando this.

<template>
  <div>
    <p>Contador: {{ contador }}</p>
    <button @click="incrementar">Incrementar</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const contador = ref(0)

const incrementar = () => {
  contador.value++
}
</script>

👉🏻 Explicación:

this.contador accede a la propiedad contador definida en data y la incrementa.

Métodos en Expresiones del Template

Los métodos también se pueden usar directamente dentro de las expresiones en el template, pero esto no es una práctica recomendada porque puede afectar al rendimiento.

<template>
  <div>
    <p>{{ obtenerMensaje() }}</p>
  </div>
</template>

<script setup>
const obtenerMensaje = () => {
  return "Hola desde un método"
}
</script>

Usar Métodos en Eventos de Formularios

Los métodos son útiles para manejar eventos como submit en formularios.

<template>
  <form @submit.prevent="procesarFormulario">
    <input v-model="nombre" placeholder="Escribe tu nombre" />
    <button type="submit">Enviar</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'

const nombre = ref("")

const procesarFormulario = () => {
  alert(`Formulario enviado por: ${nombre.value}`)
}
</script>

👉🏻 Explicación:

@submit.prevent evita que el formulario recargue la página.
El método procesarFormulario muestra un mensaje con el valor de nombre.

Llamar Métodos Desde Otros Métodos

Puedes llamar un método dentro de otro método, ideal para evitar repetir código.

<template>
  <div>
    <button @click="manejarEvento">Haz clic</button>
  </div>
</template>

<script setup>
const saludar = () => {
  alert("Hola desde otro método")
}

const manejarEvento = () => {
  saludar()
}
</script>

👉🏻 Explicación:
- manejarEvento llama al método saludar usando this.

Cuando Usar Métodos

Para manejar eventos: Responder a clics, entradas de texto, envíos de formularios, etc.
Para procesar datos: Realizar cálculos o manipulaciones antes de mostrarlos en la interfaz.
Para organizar lógica: Separar tareas en funciones más pequeñas para mayor claridad.

Buenas Prácticas

Evita lógica compleja en el template: Usa métodos para encapsular la lógica.
Nombres descriptivos: Dale nombres que expliquen lo que hacen, como calcularTotal o validarFormulario.
Reutilización: Divide las funciones en métodos reutilizables siempre que sea posible.

🌀 Directivas

En Vue.js, las directivas son atributos especiales que se agregan a los elementos HTML para manipular el DOM (Document Object Model) de manera reactiva. Estas directivas son precedidas por el prefijo v-, lo que las distingue de los atributos normales.

A continuación, se mencionan algunas de las directivas más comunes en Vue.js:

v-bind

v-bind se utiliza para enlazar un atributo o una propiedad de un componente con una variable o expresión en el componente. Esto permite modificar dinámicamente los atributos HTML de un elemento.

<img :src="imageSource" />

v-model

v-model se usa para crear un enlace bidireccional entre un campo de entrada y una variable. Esto es útil para formularios y otros elementos interactivos.

<input v-model="message" />

v-for

v-for se utiliza para renderizar una lista de elementos basados en una colección, como un array u objeto. Es muy útil para crear elementos dinámicos.

<ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

v-if

v-if renderiza condicionalmente un bloque de código solo si la expresión es verdadera. Es útil para mostrar u ocultar elementos basados en ciertas condiciones.

<p v-if="isVisible">Este mensaje se muestra si esVisible es verdadero</p>

v-else

v-else se usa junto con v-if para renderizar un bloque cuando la expresión de v-if es falsa. Es útil para crear bloques alternativos.

<p v-if="isVisible">Este mensaje es visible</p>
<p v-else>Este mensaje aparece cuando isVisible es falso</p>

v-show

v-show es similar a v-if, pero en lugar de agregar o eliminar el elemento del DOM, solo cambia su visibilidad (usando display: none).

<p v-show="isVisible">Este mensaje se muestra si isVisible es verdadero</p>

v-on

v-on se utiliza para escuchar eventos DOM y ejecutar métodos cuando esos eventos son disparados. Permite manejar interacciones del usuario.

<button @click="submitForm">Enviar</button>

v-slot

v-slot permite pasar contenido a los componentes hijo a través de slots. Facilita la creación de componentes reutilizables con contenido dinámico.

<my-component>
  <template #header>
    <h1>Contenido de encabezado</h1>
  </template>
</my-component>

v-cloak

v-cloak es utilizado para ocultar un elemento y su contenido hasta que Vue haya terminado de compilar el componente. Es útil para evitar ver el contenido sin procesar durante la carga.

<div v-cloak>
    <p>{{ message }}</p>
</div>

v-pre

v-pre evita que Vue compile el contenido de un elemento y sus descendientes. Esto es útil cuando sabes que no necesitas que Vue procese un bloque específico de contenido.

<div v-pre>
    {{ rawContent }}
</div>

v-text

v-text se utiliza para actualizar el contenido de texto de un elemento, reemplazando cualquier texto dentro de él. Es útil para manipular solo el texto.

<p v-text="message"></p>

v-html

v-html permite inyectar contenido HTML en el DOM. Esto puede ser útil, pero ten cuidado con el contenido no confiable para evitar vulnerabilidades de seguridad (como XSS).

<div v-html="rawHtml"></div>

Estas directivas permiten interactuar con el DOM y manejar datos de manera eficiente en las aplicaciones Vue.js, proporcionando funcionalidades clave como enlace de datos, control de flujo y manejo de eventos.

⚙ v-bind

La directiva v-bind se utiliza en Vue.js para enlazar dinámicamente atributos o propiedades de un elemento HTML a una expresión de Vue (generalmente una variable o propiedad del componente). De esta manera, puedes modificar el valor de un atributo de forma reactiva, lo que significa que si la variable asociada cambia, el atributo en el DOM también se actualizará automáticamente.

Sintaxis básica

<v-bind:atributo="expresión">

Donde...

atributo es el nombre del atributo HTML al que quieres enlazar un valor.
expresión es la variable o expresión de Vue que contiene el valor que se asignará al atributo.

💢 Ejemplo de uso

Imagina que tienes una propiedad imageSource en tu componente Vue y deseas que el atributo src de una etiqueta <img> se actualice automáticamente cuando el valor de imageSource cambie.

Usando v-bind

<template>
  <div>
    <!-- v-bind enlaza el atributo src con la propiedad imageSource -->
    <img :src="imageSource" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const imageSource = ref('https://example.com/imagen.jpg')
</script>

En este ejemplo... 👆

v-bind:src="imageSource" enlaza el atributo src de la etiqueta <img> con la propiedad imageSource de Vue.
Si en algún momento imageSource cambia (por ejemplo, si se actualiza mediante una función o evento), el valor de src en el DOM también cambiará automáticamente.

♒ Uso de v-bind con múltiples atributos

Puedes usar v-bind para enlazar múltiples atributos a la vez, usando un objeto de JavaScript. Esto es útil cuando deseas enlazar varios atributos de un elemento dinámicamente.

Multiples atributos

<template>
  <div>
    <!-- Usando un objeto para enlazar varios atributos -->
    <button v-bind="buttonAttributes">Haz clic aquí</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const buttonAttributes = reactive({
  type: 'button',
  class: 'btn btn-primary',
  disabled: false
})
</script>

En este caso

v-bind="buttonAttributes" pasa todos los atributos definidos en el objeto buttonAttributes al botón, de manera que el botón tendrá el type, class y disabled que están definidos en el objeto.

⚙ v-model

La directiva v-model en Vue.js se utiliza para crear un enlace bidireccional entre una entrada de datos (como un campo de texto, casillas de verificación, selectores, etc.) y una propiedad en el modelo de Vue. Esto significa que cualquier cambio en la entrada de datos actualiza automáticamente el modelo de Vue, y cualquier cambio en el modelo de Vue actualiza automáticamente la entrada de datos.

🔄 ¿Qué es el enlace bidireccional?

Un enlace bidireccional significa que el valor de la propiedad de Vue y el valor del campo de entrada están sincronizados en todo momento. Si el valor de la propiedad cambia, el campo de entrada se actualiza, y si el valor del campo de entrada cambia (por ejemplo, el usuario escribe algo), la propiedad de Vue también se actualiza.

Sintaxis básica

<input v-model="variable">

Donde

variable es la propiedad o variable de Vue que está vinculada al campo de entrada.

💢 Ejemplo de uso

Imagina que quieres crear un campo de texto en el que el usuario pueda escribir algo, y que al mismo tiempo, el valor escrito se refleje automáticamente en la propiedad message de Vue.

<template>
  <div>
    <!-- El valor del input está vinculado a la propiedad message -->
    <input v-model="message" placeholder="Escribe algo..." />
    <p>El mensaje es: {{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('')
</script>

En este ejemplo

v-model="message" vincula el valor del campo de texto con la propiedad message en el modelo de Vue.
Si el usuario escribe algo en el campo de texto, el valor de message se actualiza en tiempo real, y viceversa: si cambias la propiedad message desde el código, el campo de texto también se actualizará automáticamente.

👨‍👩‍👧‍👦 v-model en diferentes tipos de elementos

Aunque en el ejemplo anterior hemos visto el uso de v-model en un campo de texto, también se puede usar con otros tipos de elementos HTML interactivos, como:

Casillas de verificación (checkbox)

Para un checkbox, v-model se enlaza con un valor booleano (verdadero o falso).

<template>
 <div>
   <input type="checkbox" v-model="isChecked" />
   <p>¿Está marcado? {{ isChecked ? 'Sí' : 'No' }}</p>
 </div>
</template>

 <script setup>
 import { ref } from 'vue'

 const isChecked = ref(false)
 </script>

Botones de opción (radio)

Para un grupo de botones de opción, v-model se enlaza con una variable cuyo valor corresponde al valor del botón seleccionado.

<template>
   <div>
     <input type="radio" id="option1" value="Opción 1" v-model="selectedOption" />
     <label for="option1">Opción 1</label>

     <input type="radio" id="option2" value="Opción 2" v-model="selectedOption" />
     <label for="option2">Opción 2</label>

     <p>Opción seleccionada: {{ selectedOption }}</p>
   </div>
 </template>

 <script setup>
 import { ref } from 'vue'

 const selectedOption = ref('Opción 1')
 </script>

Elementos select (listas desplegables)

Para un select, v-model se puede usar para obtener el valor de la opción seleccionada.

 <template>
   <div>
     <select v-model="selectedValue">
       <option disabled value="">Seleccione una opción</option>
       <option value="1">Opción 1</option>
       <option value="2">Opción 2</option>
       <option value="3">Opción 3</option>
     </select>
     <p>Opción seleccionada: {{ selectedValue }}</p>
   </div>
 </template>

 <script setup>
 import { ref } from 'vue'

 const selectedValue = ref('')
 </script>

💦 Modificadores de v-model

v-model puede utilizar ciertos modificadores para ajustar su comportamiento. Los más comunes son:

1️⃣ .lazy: Solo actualiza la propiedad cuando el campo de texto pierde el foco (en lugar de actualizarla en cada pulsación de tecla).

<input v-model.lazy="message">

2️⃣ .number: Convierte el valor de entrada en un número cuando se asigna a la propiedad.

<input v-model.number="age" type="number">

3️⃣ .trim: Elimina los espacios en blanco al principio y al final del valor.

<input v-model.trim="message">

Resumen

v-model crea un enlace bidireccional entre un campo de entrada y una propiedad en el modelo de Vue.
Puedes usarlo con elementos como <input>, <checkbox>, <select>, y otros campos interactivos.
Al cambiar el valor en el campo de entrada, la propiedad vinculada se actualiza automáticamente y viceversa.
Existen modificadores como .lazy, .number, y .trim para ajustar el comportamiento de v-model.

Es una de las directivas más utilizadas para formularios y entradas de usuario, ya que facilita la reactividad y la sincronización automática de los datos en la interfaz.

⚙ v-if ··· v-else

Las directivas v-if y v-else en Vue.js se utilizan para renderizar condicionalmente un bloque de código HTML en función del valor de una expresión booleana. Son muy útiles cuando quieres mostrar u ocultar partes de tu interfaz de usuario en función de ciertas condiciones.

💫 Sintaxis básica

<div v-if="condición">Contenido visible si la condición es verdadera</div>
<div v-else>Contenido visible si la condición es falsa</div>

Donde..."

condición es una expresión que evalúa a true o false.
Si la condición es true, el bloque asociado a v-if se renderiza. Si es false, el bloque asociado a v-else se renderiza.

💢 Ejemplo de uso

Imagina que quieres mostrar un mensaje que cambie dependiendo de si el usuario ha iniciado sesión o no. Usarías v-if y v-else para manejar estas condiciones.

<template>
  <div>
    <p v-if="isLoggedIn">¡Bienvenido de nuevo!</p>
    <p v-else>Por favor, inicia sesión.</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isLoggedIn = ref(false) // Cambia a true para probar
</script>

En este ejemplo

Si isLoggedIn es true, se mostrará el mensaje "¡Bienvenido de nuevo!".
Si isLoggedIn es false, se mostrará el mensaje "Por favor, inicia sesión".

🤨 ¿Cómo funcionan v-if y v-else?

v-if: Renderiza el bloque solo si la expresión evaluada es true.
v-else: Renderiza el bloque solo si la expresión de v-if es false. Es importante que el bloque de v-else siempre esté justo después de un bloque v-if o v-else-if.

Puedes combinar v-if, v-else-if, y v-else para manejar múltiples condiciones de forma más estructurada.

<template>
  <div>
    <p v-if="status === 'loading'">Cargando...</p>
    <p v-else-if="status === 'error'">Hubo un error</p>
    <p v-else>Contenido cargado correctamente</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const status = ref('loading') // Cambia el valor para probar
</script>

En este caso

Si status es 'loading', se muestra "Cargando...".
Si status es 'error', se muestra "Hubo un error".
Si status tiene cualquier otro valor, se muestra "Contenido cargado correctamente".

👀 Consideraciones de rendimiento

v-if: Es más costoso en términos de rendimiento si la condición cambia frecuentemente, ya que implica montar y desmontar el DOM cada vez que la condición cambia.
v-show: Si solo necesitas ocultar y mostrar un elemento sin eliminarlo del DOM, puedes usar v-show, que solo cambia la propiedad display en CSS en lugar de montar/desmontar el elemento, siendo más eficiente en esos casos.

⚙ v-for

La directiva v-for en Vue.js se utiliza para renderizar listas o elementos repetitivos basados en una colección de datos. Es una herramienta muy poderosa que permite iterar sobre arrays, objetos o rangos y renderizar dinámicamente elementos en la interfaz.

<elemento v-for="(elemento, índice) in colección" :key="valorÚnico">
  <!-- contenido -->
</elemento>

elemento: Representa el valor actual de la iteración (el elemento del array, valor de la propiedad, etc.).
índice (opcional): Representa la posición actual dentro de la colección.
colección: Puede ser un array, un objeto o un rango de números.
:key: Es un atributo especial para mejorar el rendimiento, ya que ayuda a Vue a rastrear los elementos únicos en la lista.

📚 Ejemplo 1: Iterar sobre un Array

<template>
  <ul>
    <li v-for="(nombre, index) in nombres" :key="index">
      {{ index + 1 }}. {{ nombre }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

const nombres = ref(["Juan", "María", "Carlos", "Ana"])
</script>

Resultado Renderizado:

1. Juan
2. María
3. Carlos
4. Ana

🗼 Ejemplo 2: Iterar sobre un Objeto

Cuando iteras sobre un objeto, puedes acceder tanto a las claves como a los valores.

<template>
  <ul>
    <li v-for="(valor, clave) in usuario" :key="clave">
      {{ clave }}: {{ valor }}
    </li>
  </ul>
</template>

<script setup>
import { reactive } from 'vue'

const usuario = reactive({
  nombre: "Juan",
  edad: 30,
  ciudad: "Madrid"
})
</script>

Resultado Renderizado:

nombre: Juan  
edad: 30  
ciudad: Madrid

🔢 Ejemplo 3: Iterar sobre un Rango de Números

Puedes generar un rango de números directamente con la directiva v-for.

<ul>
  <li v-for="numero in 5" :key="numero">
    Número {{ numero }}
  </li>
</ul>

Resultado Renderizado:

Número 1  
Número 2  
Número 3  
Número 4  
Número 5

⛓️ Ejemplo 4: Renderizado Anidado

La directiva v-for también se puede anidar para iterar sobre listas dentro de listas.

<template>
  <div v-for="(categoria, index) in categorias" :key="index">
    <h3>{{ categoria.nombre }}</h3>
    <ul>
      <li v-for="(producto, i) in categoria.productos" :key="i">
        {{ producto }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const categorias = ref([
  {
    nombre: "Frutas",
    productos: ["Manzana", "Pera", "Plátano"]
  },
  {
    nombre: "Verduras",
    productos: ["Lechuga", "Zanahoria", "Espinaca"]
  }
])
</script>

Resultado Renderizado:

Frutas
- Manzana
- Pera
- Plátano

Verduras
- Lechuga
- Zanahoria
- Espinaca

Consejos Importantes

key es esencial para el rendimiento: Vue utiliza :key para identificar de manera única cada elemento en la lista. Si no se usa, puede haber problemas de rendimiento o errores al actualizar listas dinámicamente.
Evitar iterar sin límite: Si tienes listas muy largas o iteraciones anidadas, puede afectar el rendimiento. Intenta usar paginación u otras técnicas para manejar grandes conjuntos de datos.
Usar v-for con v-if: Si necesitas condicionar el renderizado dentro de un v-for, evita combinarlos en el mismo elemento. En lugar de eso, anida el v-if dentro del hijo:

<ul>
  <li v-for="tarea in tareas" :key="tarea.id">
    <p v-if="tarea.completada">{{ tarea.nombre }}</p>
  </li>
</ul>

⚙ v-show

La directiva v-show se utiliza para mostrar u ocultar elementos HTML basándose en una condición booleana. A diferencia de v-if, v-show no elimina el elemento del DOM cuando la condición no se cumple; simplemente controla la propiedad CSS display.

Cómo funciona v-show

Si la condición es true, el elemento será visible.
Si la condición es false, el elemento estará oculto (display: none).

🔡 Sintaxis

<elemento v-show="condición">
  <!-- Contenido -->
</elemento>

🔍 Ejemplo 1: Mostrar/Ocultar un Mensaje

<template>
  <div>
    <button @click="mostrar = !mostrar">
      {{ mostrar ? "Ocultar Mensaje" : "Mostrar Mensaje" }}
    </button>
    <p v-show="mostrar">¡Hola! Este es un mensaje visible.</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const mostrar = ref(true)
</script>

👉🏻 Explicación:

Al hacer clic en el botón, la variable mostrar cambia entre true y false.
Si mostrar es true, el párrafo será visible; si es false, estará oculto.

❌ Diferencia entre v-show y v-if

Característica	v-show	v-if
Renderizado inicial	Siempre renderiza el elemento (aunque esté oculto).	Renderiza solo si la condición es `true`.
Rendimiento	Mejor para cambios frecuentes, ya que usa CSS.	Mejor si el elemento se muestra/oculta pocas veces.
Efecto en el DOM	Aplica `display: none`.	Añade o elimina el elemento del DOM.

🥷🏻 Ejemplo 2: Ocultar un Elemento con v-show

<template>
  <div>
    <h1 v-show="mostrarTitulo">Este título se puede ocultar.</h1>
    <button @click="mostrarTitulo = !mostrarTitulo">
      {{ mostrarTitulo ? "Ocultar" : "Mostrar" }} Título
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const mostrarTitulo = ref(true)
</script>

👉🏻 Explicación:

El título <h1> será visible solo cuando mostrarTitulo sea true. Cambiar esta variable con el botón actualiza el CSS del título (display: none).

⚙ v-on

La directiva v-on se utiliza para escuchar eventos del DOM y ejecutar métodos o expresiones cuando ocurren. Es una herramienta esencial en Vue.js para manejar interactividad, como responder a clics de botones, movimientos del mouse, teclas del teclado, entre otros eventos.

🔡 Sintaxis Básica

<elemento v-on:evento="manejador"></elemento>

evento: El evento DOM que deseas escuchar, como click, input, submit, etc.
manejador: El método o expresión que se ejecutará cuando ocurra el evento.

👋🏻 Shorthand

Vue.js ofrece una versión abreviada de v-on:

<elemento @evento="manejador"></elemento>

🖱️ Ejemplo 1: Responder a un click

<template>
  <div>
    <button @click="saludar">Haz clic aquí</button>
  </div>
</template>

<script setup>
const saludar = () => {
  alert("¡Hola! Has hecho clic en el botón.")
}
</script>

👉🏻 Explicación:

El botón escucha el evento click.
Cuando se hace clic, se llama al método saludar, que muestra una alerta.

🗃️ Paso de Argumentos

Puedes pasar argumentos a los métodos utilizando paréntesis:

<template>
  <div>
    <button @click="mostrarMensaje('Hola Mundo')">Mostrar Mensaje</button>
  </div>
</template>

<script setup>
const mostrarMensaje = (mensaje) => {
  alert(mensaje)
}
</script>

👉🏻 Explicación:

Al hacer clic, el botón pasa la cadena "Hola Mundo" como argumento al método mostrarMensaje.

🫧 Eventos con Modificadores

Los modificadores son sufijos de la directiva que alteran su comportamiento.

stop: Detiene la propagación del evento.

<button @click.stop="detenerPropagacion">Haz clic</button>

prevent: Previene el comportamiento predeterminado del evento.
```
<form @submit.prevent="enviarFormulario">...</form>
```

once: Escucha el evento una sola vez.

<button @click.once="saludarUnaVez">Haz clic</button>

capture: Usa el modo de captura de eventos.

<div @click.capture="manejarClick">...</div>

🍥 Ejemplo 2: Uso de Modificadores

<template>
  <div>
    <form @submit.prevent="procesarFormulario">
      <input type="text" v-model="nombre" placeholder="Escribe tu nombre" />
      <button type="submit">Enviar</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const nombre = ref('')

const procesarFormulario = () => {
  alert(`Formulario enviado por: ${nombre.value}`)
}
</script>

Explicación:
- @submit.prevent evita que la página se recargue al enviar el formulario.

🍄 Uso de Eventos Nativos y Personalizados

Eventos Nativos

Puedes escuchar cualquier evento nativo del DOM, como mouseenter, blur, etc.

<div @mouseenter="mostrarTooltip">Pasa el mouse aquí</div>

Eventos Personalizados

En componentes personalizados, puedes emitir eventos con $emit y escucharlos con v-on.

Componente hijo:

this.$emit('mi-evento', datos);

Componente padre:

<hijo @mi-evento="manejarEvento"></hijo>

🚩 Ejemplo 3: Toggle de Estado

<template>
  <div>
    <p>Estado: {{ activo ? "Activo" : "Inactivo" }}</p>
    <button @click="activo = !activo">Cambiar Estado</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activo = ref(false)
</script>

👉🏻 Explicación:

El botón usa un evento click para alternar el valor booleano de activo.
Esto cambia dinámicamente el texto mostrado.

📦 Componentes

En Vue.js, un componente es una unidad reutilizable e independiente de interfaz de usuario que encapsula su estructura (HTML), estilo (CSS) y comportamiento (JavaScript). Los componentes permiten dividir la interfaz de usuario en pequeñas piezas manejables y modulares, lo que facilita el desarrollo, la reutilización y el mantenimiento del código.

💢 Por qué usar Componentes

Reutilización: Puedes usar un mismo componente en diferentes partes de tu aplicación, reduciendo la duplicación de código.
Modularidad: Ayudan a organizar el código dividiéndolo en piezas más pequeñas y manejables.
Mantenibilidad: Los cambios en un componente afectan solo a ese componente y no al resto de la aplicación.
Escalabilidad: Facilitan el desarrollo de aplicaciones más grandes y complejas.

💡 Estructura de un Componente en Vue.js

Un componente consta de:

Template: Define el HTML del componente.
Script: Contiene la lógica del componente (datos, métodos, etc.).
Style: Define el CSS específico del componente.

<template>
  <div>
    <h1>{{ titulo }}</h1>
    <p>{{ descripcion }}</p>
    <button @click="saludar">Haz clic aquí</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const titulo = ref('Hola, soy un componente')
const descripcion = ref('Este es un ejemplo básico de un componente en Vue.')

function saludar() {
  alert('¡Hola desde el componente!')
}
</script>


<style scoped>
h1 {
  color: blue;
}
p {
  font-size: 18px;
}
</style>

🪁 Cómo Registrar y Usar un Componente

Un componente se registra localmente cuando se usa solo dentro de un componente específico.

<template>
  <div>
    <MiComponente />
  </div>
</template>

<script setup>
import MiComponente from './MiComponente.vue'
</script>

🎈 2. Registro Global

Un componente se registra globalmente cuando quieres que esté disponible en toda la aplicación. Esto se hace en el archivo principal (main.js).

import { createApp } from 'vue'
import App from './App.vue'
import MiComponente from './components/MiComponente.vue'

const app = createApp(App)

app.component('MiComponente', MiComponente)

app.mount('#app')

Ahora puedes usar <MiComponente /> en cualquier lugar de tu aplicación sin necesidad de importarlo en cada componente.

Propiedades (`props`)

Los componentes permiten pasar datos desde el componente padre al hijo utilizando propiedades (props).

🔰Componente Padre✨Componente Hijo ~ HijoComponente.vue

<template>
  <div>
    <HijoComponente nombre="Juan" />
  </div>
</template>

<script setup>
  import HijoComponente from './HijoComponente.vue'
</script>

<template>
  <p>Hola {{ nombre }}</p>
</template>

<script setup>
  defineProps({
    nombre: String
  })
</script>

El hijo recibe el dato nombre desde el padre y lo utiliza dentro de su plantilla.

Eventos Personalizados

Los componentes hijos pueden enviar eventos al componente padre para notificar cambios o acciones utilizando $emit.

🔰 Componente Padre✨ Componente Hijo (Boton.vue)

<template>
  <div>
    <Boton @eventoClic="manejarEvento" />
  </div>
</template>

<script setup>
import Boton from './Boton.vue'

function manejarEvento(mensaje) {
  alert(mensaje) // Muestra "¡Botón pulsado!"
}
</script>

<template>
  <button @click="$emit('eventoClic', '¡Botón pulsado!')">Haz clic</button>
</template>

<script setup>
  const emit = defineEmits(['eventoClic'])
</script>

🎛 Comunicación entre Componentes

De Padre a Hijo: Se realiza con props
De Hijo a Padre: Se realiza con eventos personalizados y $emit
Entre Componentes Hermanos: Usando un patrón como un bus de eventos o un estado compartido (usando Pinia🍍)

💯 Ejemplo Completo

Componente Padre: Gestiona un contador.
Componente Hijo: Botones para incrementar o decrementar el contador.

🔰Componente Padre (App.vue)✨ Componente Hijo ~ Boton.vue

<template>
  <div>
    <h1>Contador: {{ contador }}</h1>
    <Boton texto="Incrementar" :accion="incrementar" />
    <Boton texto="Decrementar" :accion="decrementar" />
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import Boton from './Boton.vue'

  const contador = ref(0)

  function incrementar() {
    contador.value++
  }

  function decrementar() {
    contador.value--
  }
</script>

<template>
  <button @click="accion">{{ texto }}</button>
</template>

<script setup>
  const props = defineProps(['texto', 'accion'])
</script>

Beneficios Clave de los Componentes

Reutilización: Usas un componente en múltiples lugares con diferente configuración.
Separación de Preocupaciones: La lógica, la estructura y el estilo están contenidos en un único archivo.
Escalabilidad: Facilitan la construcción de aplicaciones complejas y mantenibles.

Componentes Dinámicos

Los componentes dinámicos permiten renderizar diferentes componentes en una misma ubicación de forma dinámica, según ciertas condiciones. Esto es útil cuando necesitas alternar entre varios componentes en una misma área sin replicar lógica o estructura.

La Directiva is

En Vue.js, se usa el atributo especial is en una etiqueta <component> para renderizar un componente dinámico.

<template>
  <div>
    <h1>Componente Dinámico</h1>
    <button @click="componenteActual = 'ComponenteA'">Mostrar A</button>
    <button @click="componenteActual = 'ComponenteB'">Mostrar B</button>

    <!-- Usamos el objeto 'componentes' para evitar errores si el nombre no coincide -->
    <component :is="componentes[componenteActual]" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ComponenteA from './ComponenteA.vue'
import ComponenteB from './ComponenteB.vue'

// Reactivo para controlar qué componente mostrar
const componenteActual = ref('ComponenteA')

// Registramos los componentes en un objeto
const componentes = {
  ComponenteA,
  ComponenteB
}
</script>

💫 Explicación

La etiqueta <component> renderiza un componente según el valor de componenteActual.
Los botones permiten cambiar el valor de componenteActual y, por tanto, el componente que se muestra.

Componentes Anidados

Los componentes anidados son aquellos que están contenidos dentro de otros componentes. Esto permite crear estructuras jerárquicas en las interfaces de usuario.

💢 Ejemplo Básico de Componentes Anidados

Supongamos que estamos construyendo un sistema de comentarios. Un componente padre mostrará una lista de comentarios, y cada componente hijo representará un comentario individual.

✨ Componente Hijo: Comentario.vue🔰Componente Padre: ListaComentarios.vue

<template>
  <div class="comentario">
    <h3>{{ autor }}</h3>
    <p>{{ mensaje }}</p>
  </div>
</template>

<script setup>
  defineProps({
    autor: String,
    mensaje: String
  })
</script>

<style scoped>
  .comentario {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
</style>

  <template>
    <div>
      <h1>Lista de Comentarios</h1>
      <Comentario
        v-for="(comentario, index) in comentarios"
        :key="index"
        :autor="comentario.autor"
        :mensaje="comentario.mensaje"
      />
    </div>
  </template>

  <script setup>
    import { ref } from 'vue'
    import Comentario from './Comentario.vue'

    const comentarios = ref([
      { autor: 'Ana', mensaje: '¡Me encanta este artículo!' },
      { autor: 'Carlos', mensaje: '¡Muy interesante!' },
      { autor: 'Luisa', mensaje: 'Gracias por compartir esta información.' },
    ])
  </script>

🧙‍♂️ Ejemplo Avanzado: Comunicación en Componentes Anidados

Un componente padre que contiene una lista de tareas.
Cada tarea es representada por un componente hijo.
El hijo puede emitir un evento al padre, por ejemplo, para eliminar la tarea.

✨Componente Hijo: Tarea.vue🔰Componente Padre: ListaTareas.vue

<template>
  <div class="tarea">
    <p>{{ titulo }}</p>
    <button @click="$emit('eliminar')">Eliminar</button>
  </div>
</template>

<script setup>
  defineProps({
    titulo: String
  })
</script>

<style scoped>
  .tarea {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>

<template>
  <div>
    <h1>Mis Tareas</h1>
    <Tarea
      v-for="(tarea, index) in tareas"
      :key="index"
      :titulo="tarea"
      @eliminar="eliminarTarea(index)"
    />
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import Tarea from './Tarea.vue'

  const tareas = ref(['Comprar pan', 'Hacer ejercicio', 'Estudiar Vue.js'])

  function eliminarTarea(index) {
    tareas.value.splice(index, 1)
  }
</script>

Componentes Anidados Dinámicos

Se pueden combinar componentes dinámicos y componentes anidados para crear aplicaciones más complejas. Por ejemplo, un componente padre puede decidir qué tipo de componente hijo mostrar basado en los datos.

💥 Ejemplo, un sistema de notificaciones con diferentes tipos de notificaciones:

Éxito
Error
Advertencia

Componente Hijo: Notificacion.vueComponente Padre

<template>
  <div :class="['notificacion', tipo]">
    <slot></slot>
  </div>
</template>

<script setup>
  defineProps({
    tipo: {
      type: String,
      default: 'info'
    }
  })
</script>

<style scoped>
  .notificacion {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .notificacion.exito {
    background-color: #d4edda;
    color: #155724;
  }
  .notificacion.error {
    background-color: #f8d7da;
    color: #721c24;
  }
  .notificacion.advertencia {
    background-color: #fff3cd;
    color: #856404;
  }
</style>

<template>
  <div>
    <h1>Sistema de Notificaciones</h1>
    <Notificacion tipo="exito">¡Operación exitosa!</Notificacion>
    <Notificacion tipo="error">Algo salió mal.</Notificacion>
    <Notificacion tipo="advertencia">Cuidado con este cambio.</Notificacion>
  </div>
</template>

<script setup>
  import Notificacion from './Notificacion.vue'
</script>

Ciclo de vida de un componente

El ciclo de vida de un componente Vue es la serie de etapas por las que pasa desde que se crea hasta que se destruye:

Creación
Montaje en el DOM
Actualización
Destrucción

Vue nos ofrece hooks que nos permiten ejecutar código en cada fase.

<template>
  <div>
    <h1>Ciclo de Vida Interactivo</h1>
    <button @click="contador++">Incrementar contador</button>
    <button @click="mostrar = !mostrar">
      {{ mostrar ? 'Ocultar componente' : 'Mostrar componente' }}
    </button>

    <!-- Componente que se puede desmontar -->
    <div v-if="mostrar" class="componente">
      <p>Contador: {{ contador }}</p>
      <h3>Eventos de ciclo de vida:</h3>
      <ul>
        <li v-for="(evento, index) in eventos" :key="index">{{ evento }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
  import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

  // --- Reactivos ---
  const contador = ref(0)
  const mostrar = ref(true)
  const eventos = ref([])

  // --- Función para registrar eventos ---
  function logEvento(nombre) {
    eventos.value.push(nombre)
  }

  // --- Script setup → simula created() ---
  logEvento('1️⃣ Script setup ejecutado → Simula created()')

  // --- Hooks del ciclo de vida ---
  onBeforeMount(() => logEvento('2️⃣ beforeMount → justo antes de insertar el DOM'))
  onMounted(() => logEvento('3️⃣ mounted → componente insertado en el DOM'))
  onBeforeUpdate(() => logEvento('4️⃣ beforeUpdate → justo antes de actualizar el DOM'))
  onUpdated(() => logEvento('5️⃣ updated → DOM actualizado'))
  onBeforeUnmount(() => logEvento('6️⃣ beforeUnmount → justo antes de destruir el componente'))
  onUnmounted(() => logEvento('7️⃣ unmounted → componente destruido'))
</script>

<style scoped>
  .componente {
    margin-top: 20px;
    padding: 15px;
    border: 2px solid #007BFF;
    border-radius: 8px;
    background-color: #f0f8ff;
  }
  button {
    margin-right: 10px;
    padding: 5px 10px;
  }
  ul {
    margin-top: 10px;
  }
</style>

Cómo funciona

Incrementar contador → dispara beforeUpdate y updated.
Mostrar / Ocultar componente → dispara beforeUnmount y unmounted cuando se oculta, y beforeMount / mounted cuando se muestra de nuevo.
Todos los eventos se registran en la lista de la página, así ves en tiempo real el orden del ciclo de vida.

🛣️ Router

Vue Router es la librería oficial de Vue para crear aplicaciones SPA (Single Page Application).

Es una solución de enrutamiento que permite a los desarrolladores definir y gestionar las rutas (URLs) de su aplicación. Proporciona una forma declarativa de conectar rutas específicas con componentes de Vue, permitiendo que los usuarios naveguen entre diferentes vistas sin recargar la página completa.

En una SPA (Simple Page Application), todo el contenido de la aplicación se carga inicialmente, y el router se encarga de actualizar dinámicamente la vista según la URL actual, proporcionando una experiencia fluida y rápida similar a la de una aplicación nativa.

Estructura típica de un proyecto Vue con Router

src/
 ├─ main.js
 ├─ App.vue
 ├─ router/
 │   └─ index.js
 └─ views/
     ├─ Home.vue
     ├─ About.vue
     ├─ Usuario.vue
     └─ NotFound.vue

Instalación de Vue Router

Lo primero que tenemos que hacer es instalar el Router en nuestro proyecto de la siguiente manera:

npm install vue-router

Ten en cuenta que...

... puedes instalar el router de manera GLOBAL para usarlo en todos los proyectos de vue que tengas en tu ordenador, para ello puedes lanzar el siguiente comando:

👉🏻 npm install vue-router 👈🏻

Con el parámetro '-g' no tendrás que instalar el router cada vez que crees un proyecto nuevo.

Añadir el Router a un proyecto ⭕ ya existente ⭕

Cuando creamos los primeros proyectos en VueJS, elegimos ciertos paquetes de base que se iban a instalar en nuestro sistema.

A la hora de hacer npm create vue@latest la consola nos hacía una serie de preguntas relacionadas con las dependencias de nuestro proyecto de Vue, pero si os acrodáis, le dijimos a todo que no... en esa lista estaba incluído el Router de Vue.

Pero no pasa nada, podemos instalar cualquier paquete después de haber creado el proyeto de Vue.

💡 Lo único que hay que tener en cuenta es, añadir ese paquete (en este caso el Router de Vue) a nuestro proyecto ya existente.

1. Modificamos el archivo main.js para que importe el paquete

Debemos decirle a nuestro archivo maestro main.js que cargue el nuevo paquete que hemos instalado, en este caso, el Router.

// Añadimos esta línea por el principio de nuestro archivo
import { createRouter, createWebHistory } from 'vue-router';

2. Importando los componentes que van a hacer de vistas en nuestro proyecto, es decir, las secciones

// Vamos a crear 3 secciones diferentes en este ejemplo

/* La sección 🏠 Home:
   que será nuestra vista principal, como si de index.html se tratase */
import Home from '../views/Home.vue'

/* La sección ℹ️ About
   que nos renderizará la típica sección con información del sitio */
import About from '../views/About.vue'

/* La sección 📚 Contact
   que puede mostrar un formulario de contacto */
import Contact from '../views/Contact.vue'

3. Definiendo las rutas de nuestro sitio y creando el historial

En este paso debemos decirle a nuestra aplicación dónde se encuentrar las rutas que hemos establecido más arriba y qué componente de vue está asignado a cada una de ellas.

// Estamos en el archivo 🔰 router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Contact from '../views/Contact.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/contact',
    name: 'contact',
    component: Contact
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

4. Instanciando todo

Ahora solo queda modificar la instancia de createApp que teníamos y lo sustituimos por estas líneas:

// Estamos en el archivo 🔰 main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router)
  .mount('#app')

Utilizando el Router

Ahora que ya hemos preparado las dependencias y acuatlizado nuestro archivo 🟡 main.js 🟡 ya estamos listos para utilizarlo en nuestros archivos .vue

Recomendación sobre App.vue

Hemos hecho uso de nuestro App.vue como archivo index.html, es decir, hemos creado la vista principal dentro de App.vue pero es recomendable crear un archivo .vue a parte donde carguemos la página principal, como por ejemplo en 🔰Home.vue🔰 o cualquier otro nombre que haga referencia a la sección principal de nuestra web

A continuación, haremos uso del componente 🟪router-view🟪 (también conocido como <RouterView>) que viene por defecto con el router para poder decirle a nuestro sistema que debe cargar las rutas que hemos añadido en nuestro archivo main.js.

Cambiaremos las líneas de nuestro archivo App.vue para que quede lo más limpio posible.

<script setup>
  import Home from '@/Components/Home.vue'
  import About from '@/Components/About.vue'
  import Contact from '@/Components/Contact.vue'
</script>
<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
  </nav>

  <!-- 🟡 Muy importante colocar el Router-View -->
  <router-view />

</template>
<!-- ⛔ FIN del archivo -->

Ya tenemos listo nuestro enrutamiento, ahora solo falta crear los enlaces en nuestra app. Podemos hacer uso de los enlaces en cualquier componente.

Rutas dinámicas

En Vue Router, las rutas dinámicas son aquellas que incluyen parámetros variables en su URL, lo que permite manejar datos específicos en las vistas. Estas rutas son útiles para aplicaciones donde necesitas mostrar contenido basado en un identificador único, como un blog, una tienda en línea o un sistema de usuarios.

Ejemplo básico ➡️ Una ruta dinámica puede definirse con un parámetro en la URL, precedido por dos puntos (:). Por ejemplo, para mostrar un usuario específico:

🟡 main.js

const routes = [
  { 
    path: '/usuario/:id', // id es un parámetro dinámico que nosotros nos inventamos
    name: 'usuario',
    component: () => import('../views/Usuario.vue')
  },
];

Info

En este caso, :id es un parámetro dinámico que puede cambiar según el usuario que quieras mostrar (por ejemplo, /usuario/123 o /usuario/456).

🤹🏻‍♂️ Acceso al parámetro dinámico ~ Dentro del componente asociado a la ruta, puedes acceder al valor del parámetro dinámico usando $route.params

🔰 Usuario.vue

<template>
  <h1>Usuario {{ id }}</h1>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
const id = route.params.id
</script>

Ventajas de las rutas dinámicas

🙆🏻 Flexibilidad: Permiten manejar múltiples datos con un solo componente.
⚡ Reactividad: Los parámetros cambian automáticamente cuando la URL cambia.
🗃️ Organización: Facilitan estructurar aplicaciones complejas con rutas reutilizables.

Si defines una ruta como /usuario/:id y navegas a /usuario/123, el componente asociado podrá mostrar información basada en el id proporcionado, como "Usuario 123".

Las rutas dinámicas son una pieza clave para construir aplicaciones web modernas y escalables en Vue.

Navegación programática

Se usa cuando navegamos desde el propio código, en vez de un menú de enlaces

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

function irAHome() {
  router.push('/')
}
</script>

<template>
  <button @click="irAHome">Ir a Home</button>
</template>

Parametros de la URL o Query Parameters

Los query params no forman parte de la ruta, sino de la URL. Para acceder a ello necesitamos hacer uso de query

Ejemplo

www.misuperurl.com/buscar?texto=buscar+algo

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
const texto = route.query.texto
</script>

Lazy Loading

Lazy loading mejora el rendimiento cargando componentes solo cuando se visitan.

{
  path: '/about',
  component: () => import('../views/About.vue')
}

Redirecciones

{
  path: '/inicio',
  redirect: '/'
}

Ruta 404

{
  path: '/:pathMatch(.*)*',
  name: 'notfound',
  component: () => import('../views/NotFound.vue')
}

🎒 Propiedades computadas

Las propiedades computadas son una de las características más potentes de Vue.js. Se utilizan para definir lógica que depende de los datos de tu componente y se actualizan automáticamente cuando esos datos cambian. Esto permite mantener tu código más limpio y evitar duplicación.

❓ ¿Qué son las propiedades computadas?

Son funciones que se declaran en la sección computed de un componente Vue. Estas funciones actúan como propiedades que puedes usar en tu plantilla, pero a diferencia de las propiedades normales, están basadas en otros datos reactivos y se recalculan automáticamente cuando esos datos cambian.

Ventajas de las Propiedades Computadas

Cacheadas Automáticamente: Una propiedad computada solo se recalcula cuando cambian los datos en los que depende. Si no hay cambios, Vue reutiliza el resultado anterior, lo que mejora el rendimiento.
Separación de Lógica: Ayudan a mantener la lógica separada de la plantilla, haciendo el código más legible y fácil de mantener.
Reactivas: Se actualizan automáticamente cuando cambian los datos reactivos.

Ejemplo Básico

Supongamos que tienes un componente donde almacenas el nombre y el apellido de un usuario, pero quieres mostrar el nombre completo.

<template>
  <div>
    <p>Nombre: {{ nombre }}</p>
    <p>Apellido: {{ apellido }}</p>
    <p>Nombre Completo: {{ nombreCompleto }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nombre: 'Juan',
      apellido: 'Pérez',
    };
  },
  computed: {
    nombreCompleto() {
      return `${this.nombre} ${this.apellido}`;
    },
  },
};
</script>

Explicación

nombreCompleto es una propiedad computada que combina nombre y apellido.
Si cambias nombre o apellido, nombreCompleto se recalcula automáticamente.

Ejemplo con Dependencias

Las propiedades computadas pueden depender de múltiples datos reactivos.

<template>
  <div>
    <p>Precio Unitario: {{ precio }}</p>
    <p>Cantidad: {{ cantidad }}</p>
    <p>Total: {{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      precio: 10,
      cantidad: 3,
    };
  },
  computed: {
    total() {
      return this.precio * this.cantidad;
    },
  },
};
</script>

Propiedades Computadas 🆚 Métodos

A veces, podrías pensar que un método puede hacer lo mismo que una propiedad computada. Sin embargo, hay diferencias importantes:

Propiedad Computada

Es cacheada.
Solo se recalcula cuando cambian los datos en los que depende.

Método"

No es cacheado.
Se ejecuta cada vez que se invoca, incluso si los datos no han cambiado.

⚡ Ejemplo Comparativo

<template>
  <div>
    <p>Propiedad Computada: {{ propiedadComputada }}</p>
    <p>Método: {{ metodo() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numero: 5,
    };
  },
  computed: {
    propiedadComputada() {
      console.log('Recalculando propiedad computada');
      return this.numero * 2;
    },
  },
  methods: {
    metodo() {
      console.log('Ejecutando método');
      return this.numero * 2;
    },
  },
};
</script>

Note

La propiedad computada solo recalcula si numero cambia.
El método se ejecuta cada vez que se llama, incluso si numero no ha cambiado.

Propiedades Computadas con `get` y `set`

Las propiedades computadas también pueden tener un setter para permitir escribir valores en ellas.

<template>
  <div>
    <p>Nombre Completo: {{ nombreCompleto }}</p>
    <input v-model="nombreCompleto" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      nombre: 'Juan',
      apellido: 'Pérez',
    };
  },
  computed: {
    nombreCompleto: {
      get() {
        return `${this.nombre} ${this.apellido}`;
      },
      set(valor) {
        const partes = valor.split(' ');
        this.nombre = partes[0];
        this.apellido = partes[1] || '';
      },
    },
  },
};
</script>

Explicación

Cuando escribes en el campo de texto, el setter actualiza las propiedades nombre y apellido.
Esto permite usar propiedades computadas con dos vías de enlace (v-model).

4️⃣ VueJS

🥅 Estructura básica

🔢 Variables

1. Definiendo Variables

2. Usando las Variables en la Plantilla

3. Variables con Diferentes Tipos de Datos

💭 Métodos o funciones

Definir y Usar Métodos

Métodos con Argumentos

Acceso a Datos y Otras Propiedades

Métodos en Expresiones del Template

Usar Métodos en Eventos de Formularios

Llamar Métodos Desde Otros Métodos

🌀 Directivas

⚙ v-bind

⚙ v-model

⚙ v-if ··· v-else

⚙ v-for

⚙ v-show

⚙ v-on

📦 Componentes

Propiedades (props)

Eventos Personalizados

Componentes Dinámicos

Componentes Anidados

Componentes Anidados Dinámicos

Ciclo de vida de un componente

🛣️ Router

Instalación de Vue Router

Añadir el Router a un proyecto ⭕ ya existente ⭕

Utilizando el Router

Rutas dinámicas

Navegación programática

Parametros de la URL o Query Parameters

Lazy Loading

Redirecciones

Ruta 404

🎒 Propiedades computadas

Ventajas de las Propiedades Computadas

Propiedades Computadas 🆚 Métodos

Propiedades Computadas con get y set

Propiedades (`props`)

Propiedades Computadas con `get` y `set`