Tutorial Vuejs: Introducción a la sintaxis de plantillas

¿Qué es la sintaxis de plantillas en Vue?

La sintaxis de plantillas en Vue.js permite a los desarrolladores de software describir de manera declarativa cómo debería verse la interfaz de usuario, en función del estado de la aplicación. 

En lugar de manejar manualmente la manipulación del DOM, como sería necesario en JavaScript puro o en jQuery, Vue.js utiliza esta sintaxis de plantillas para vincular el estado de la aplicación con la vista de una manera fluida y reactiva.

Principales características de la sintaxis de plantillas:

• Interpolación: La interpolación es una de las funcionalidades clave de la sintaxis de plantillas. Permite incrustar expresiones de JavaScript dentro del HTML utilizando las dobles llaves {{ }}. Por ejemplo, puedes mostrar datos dinámicos que provienen del estado de Vue directamente en el HTML.

<p>{{ mensaje }}</p>

• Directivas: Vue.js ofrece un conjunto de directivas específicas que permiten modificar el DOM de forma reactiva. Aunque no se entra en detalles sobre cada directiva, es importante saber que las directivas comienzan con el prefijo v- (como v-if, v-for o v-bind) y se utilizan para implementar funcionalidades comunes, como bucles, condicionales, y enlace de atributos.

<p v-if="mostrar">
Este texto solo se muestra si `mostrar` es true
</p>

• Enlace de atributos: Mediante directivas como v-bind, Vue permite enlazar dinámicamente los atributos de los elementos HTML a las propiedades del estado de la aplicación. Esto es útil para actualizar valores de clases CSS, IDs, o cualquier otro atributo de un elemento en función del estado.

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

• Eventos: La sintaxis de plantillas también facilita el manejo de eventos a través de la directiva v-on. Esta permite escuchar eventos del DOM como clics, teclados, entre otros, y ejecutar métodos definidos en el componente.

<button v-on:click="hacerAlgo">Click me</button>

• Enlace de clases y estilos: Vue.js permite enlazar clases CSS y estilos en línea de forma dinámica. Esto se puede realizar de manera declarativa y reactiva, lo que hace que los cambios de estilo de acuerdo con el estado de la aplicación sean más sencillos.

<div v-bind:class="{ activo: esActivo }"></div>

• Componentización: Una de las ventajas más potentes de Vue.js es su enfoque en la creación de componentes reutilizables. La sintaxis de plantillas facilita la organización de la interfaz en pequeñas piezas que se pueden gestionar de forma aislada, permitiendo que cada componente tenga su propia lógica y diseño encapsulado.

Expresiones en Plantillas

En Vue, las expresiones en plantillas permiten realizar evaluaciones y operaciones lógicas directamente en el HTML. Estas expresiones se utilizan dentro de las llaves dobles {{ }} y soportan la mayoría de las operaciones JavaScript. Es importante recordar que las expresiones en plantillas están limitadas a operaciones simples y no deben contener efectos secundarios.

Operaciones aritméticas

Puedes realizar operaciones aritméticas básicas dentro de las expresiones en plantillas.

<script setup lang="ts">
  const numero1 = 10;
  const numero2 = 20;
</script>

<template>
  <p>{{ numero1 + numero2 }}</p>
</template>

Operaciones lógicas

Las expresiones en plantillas también permiten el uso de operadores lógicos.

<script setup lang="ts">
  const activo = true;
</script>

<template>
  <p>{{ activo && 'Activo' }}</p>
  <p>{{ !activo && 'Inactivo' }}</p>
</template>

Llamadas a métodos

Puedes invocar métodos definidos en el componente dentro de las expresiones en plantillas.

<script setup lang="ts">
  const mensaje = "Hola, Vue!";

  function obtenerMensaje() {
        return mensaje
      }
</script>

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

Acceso a propiedades de objetos

Las expresiones en plantillas permiten acceder a propiedades de objetos y arrays.

<script setup lang="ts">
  const usuario = {
          nombre: 'Juan'
        }
  const lista = ['Elemento 1', 'Elemento 2']
</script>

<template>
  <p>{{ usuario.nombre }}</p>
  <p>{{ lista[0] }}</p>
</template>

Expresiones complejas

A pesar de que es posible escribir expresiones complejas dentro de las plantillas, se recomienda mantenerlas simples y delegar la lógica más compleja a métodos o propiedades computadas para mejorar la legibilidad y el mantenimiento del código.

<script setup lang="ts">
  const mensajeLargo = 'Este es un mensaje largo'
</script>

<template>
  <p>{{ mensajeLargo.split(' ').reverse().join(' ') }}</p>
</template>

Consideraciones de seguridad

Es crucial evitar usar expresiones que puedan resultar en vulnerabilidades de seguridad, como la ejecución de código no confiable. Vue automáticamente escapa las expresiones en plantillas para prevenir ataques XSS (Cross-Site Scripting).

Las expresiones en plantillas son una herramienta poderosa para realizar evaluaciones y operaciones directamente en el HTML, facilitando la creación de interfaces de usuario dinámicas y reactivas.

¿Qué es una directiva y para qué sirve?

En Vue, una directiva es un atributo especial que proporciona funcionalidades específicas al DOM. 

Las directivas se reconocen por el prefijo v- seguido de un nombre que indica su propósito. Estas directivas permiten a los desarrolladores manipular el DOM de manera reactiva y declarativa, enlazando la lógica del componente con la vista de forma eficiente.

Las directivas pueden:

• Manipular el DOM: Permiten agregar, eliminar o modificar elementos del DOM en función de las condiciones de la aplicación.
• Enlazar datos: Facilitan la sincronización entre los datos del componente y los elementos del DOM.
• Escuchar eventos: Proveen una manera de manejar eventos del DOM directamente desde las plantillas.
• Aplicar clases y estilos: Permiten aplicar clases y estilos CSS dinámicamente en función de los datos del componente.

Ejemplo de uso de directivas

v-if

La directiva v-if permite renderizar elementos del DOM condicionalmente. Solo se renderiza el elemento si la expresión asociada es verdadera.

<script setup lang="ts">
  const mostrarMensaje = true;
</script>

<template>
  <p v-if="mostrarMensaje">Este mensaje es condicional</p>
</template>

v-for

La directiva v-for se utiliza para iterar sobre una colección de datos y renderizar un elemento del DOM para cada ítem.

<script setup lang="ts">
  const lista = [
          { id: 1, nombre: 'Elemento 1' },
          { id: 2, nombre: 'Elemento 2' },
          { id: 3, nombre: 'Elemento 3' }
        ]
</script>

<template>
  <ul>
    <li v-for="elemento in lista" :key="elemento.id">{{ elemento.nombre }}</li>
  </ul>
</template>

v-on

La directiva v-on se utiliza para escuchar eventos del DOM y ejecutar métodos del componente en respuesta a esos eventos.

<script setup lang="ts">
  const mensaje = '¡Hola desde Vue!';

  function mostrarAlerta() {
        alert(mensaje)
      }
</script>

<template>
  <button v-on:click="mostrarAlerta">Haz clic aquí</button>
</template>

v-model

La directiva v-model permite crear un enlace bidireccional entre los datos del componente y los elementos del formulario del DOM, facilitando la creación de formularios reactivos.

<script setup lang="ts">
  import { ref } from 'vue';

  const nombre = ref<string>("")
</script>

<template>
  <input v-model="nombre" placeholder="Escribe tu nombre">

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

Las directivas en Vue son herramientas esenciales para desarrollar aplicaciones interactivas y dinámicas, proporcionando una forma declarativa de enlazar la lógica del componente con el DOM.

Uso de la directiva v-bind

La directiva v-bind en Vue se utiliza para enlazar atributos de HTML a datos del componente de una manera reactiva. Esto permite que los atributos se actualicen automáticamente cuando los datos del componente cambian. La sintaxis básica de v-bind es v-bind:atributo="expresión", donde atributo es el atributo HTML que deseas enlazar y expresión es la expresión de JavaScript que se evalúa para proporcionar el valor del atributo.

Enlazando atributos

Uno de los usos más comunes de v-bind es para enlazar el atributo src de una etiqueta img a una propiedad del componente.

<script setup lang="ts">
 const imagenSrc = 'https://vuejs.org/images/logo.png'
</script>

<template>
  <img v-bind:src="imagenSrc" alt="Descripción de la imagen">
</template>

En este ejemplo, el atributo src de la imagen se enlaza a la propiedad imagenSrc del componente. Si imagenSrc cambia, el src de la imagen se actualizará automáticamente.

Enlazando múltiples atributos

Con v-bind, también es posible enlazar múltiples atributos a la vez utilizando un objeto. Esto es útil cuando tienes varios atributos que deseas enlazar de manera dinámica.

<script setup lang="ts">
 const enlacePropiedades = {
          href: 'https://vuejs.org',
          title: 'Documentación de Vue.js',
          target: '_blank'
        }
</script>

<template>
  <a v-bind="enlacePropiedades">Enlace dinámico</a>
</template>

En este caso, todos los atributos especificados en el objeto enlacePropiedades se enlazan al elemento a.

Enlazando clases y estilos

La directiva v-bind es especialmente útil para enlazar clases y estilos CSS de manera dinámica.

Clases dinámicas

Puedes utilizar v-bind:class para añadir o eliminar clases CSS en función de las propiedades del componente.

<script setup lang="ts">
  const isActive = true;
  const hasError = false;
</script>

<template>
  <div v-bind:class="{ activo: isActive, 'text-danger': hasError }">Este div tiene clases dinámicas</div>
</template>

En este ejemplo, la clase activo se añadirá si isActive es true, y text-danger se añadirá si hasError es true.

Estilos dinámicos

De manera similar, v-bind:style permite aplicar estilos en línea dinámicamente.

<script setup lang="ts">
  const colorTexto = 'red';
  const tamañoTexto = 20;
</script>

<template>
  <div v-bind:style="{ color: colorTexto, fontSize: tamañoTexto + 'px' }">Texto con estilo dinámico</div>
</template>

Aquí, el color del texto y el tamaño de la fuente se enlazan a las propiedades colorTexto y tamañoTexto del componente.

Uso de la sintaxis abreviada

Vue proporciona una sintaxis abreviada para v-bind, utilizando el símbolo dos puntos :. Esto es útil para reducir la verbosidad del código.

<script setup lang="ts">
  const imagenSrc = 'https://vuejs.org/images/logo.png'
</script>

<template>
  <img :src="imagenSrc" alt="Descripción de la imagen">
</template>

En este ejemplo, :src es equivalente a v-bind:src.

Enlazando atributos booleanos

Para atributos booleanos, como disabled o checked, la directiva v-bind puede utilizarse para enlazar el atributo a una expresión booleana.

<script setup lang="ts">
  import { ref } from 'vue';

  const isDisabled = ref<boolean>(false);
</script>

<template>
    <button @click="isDisabled = !isDisabled" :disabled="isDisabled">Botón<button>
</template>

En este ejemplo, el botón se deshabilitará si isDisabled es true.

La directiva v-bind es una herramienta esencial en Vue para crear componentes dinámicos y reactivos, asegurando que los atributos HTML se actualicen automáticamente en respuesta a los cambios en los datos del componente.