Las directivas de Vue.js son atributos especiales que extienden el HTML para añadir funcionalidad reactiva a tus componentes. Aprenderás a usar v-text, v-html y v-once dentro de la opción template, una alternativa más profesional a la doble llave {{ }} cuando construyes aplicaciones con múltiples componentes.

Qué es la opción template y por qué reemplaza al HTML del DOM

Cuando trabajas con Vue, puedes escribir tu vista directamente en el HTML del navegador o moverla dentro del propio componente. La segunda opción se vuelve casi obligatoria cuando una aplicación crece.

La opción template es una propiedad que agregas en la configuración del componente. Recibe una cadena de texto que se comporta como HTML, pero con un superpoder: dentro puedes usar directivas de Vue.js. Esto te permite declarar comportamiento sin tocar manualmente el DOM desde JavaScript.

¿Qué es un template en Vue.js? Es la vista declarativa de un componente, escrita como string con sintaxis HTML, que admite directivas de Vue para enlazar datos y lógica reactiva [01:05].

Cómo se ve un template básico con un div interno

Dentro del template puedes anidar cualquier elemento HTML válido: otro div, un párrafo, un botón o incluso componentes que tú mismo crees más adelante. Lo interesante empieza cuando reemplazas el {{ text }} por una directiva.

Cómo funciona la directiva v-text para interpolar texto

La directiva v-text sirve para inyectar texto plano en un elemento sin usar dobles llaves. Su sintaxis sigue la convención de Vue: empieza con v-, seguido del nombre.

html

<div v-text="text"></div>

Aquí le pasas el nombre de la variable reactiva entre comillas y Vue se encarga de pintar el valor. Si modificas vm.text desde la consola con un segundo texto, la vista se actualiza al instante. Esa es la renderización reactiva en acción [03:45].

¿Cuándo usar v-text en lugar de la doble llave? Cuando solo necesitas mostrar texto plano en un elemento completo, sin mezclar con otras expresiones. Es más explícito y limpio.

Qué hace v-once y cuándo conviene usarlo

No todo en tu aplicación necesita ser reactivo. A veces quieres que un valor se pinte una sola vez y nunca más cambie, aunque su variable original se actualice.

Eso es justo lo que resuelve v-once. Lo agregas como atributo y Vue renderiza ese contenido en la primera pasada, ignorando cambios posteriores.

html

<div v-once>{{ text }}</div>

Si después modificas text, el navegador conserva el valor original. Útil para contenido estático que no quieres que el sistema reactivo siga vigilando, ahorrando ciclos de renderizado [05:20].

Cómo usar v-html para renderizar HTML dinámico de forma segura

La directiva v-html se parece a v-text, pero con una diferencia clave: interpreta la cadena como HTML real, no como texto plano.

Si pones una etiqueta <p> dentro de tu variable y usas v-text, Vue escapa los caracteres y verás los signos < y > impresos en pantalla. Con v-html esa misma cadena se convierte en un párrafo real dentro del DOM.

Por qué v-html puede ser un riesgo de seguridad

Aquí viene lo delicado. Si la cadena que pintas con v-html proviene de un input de usuario, alguien podría inyectar un script malicioso que se ejecute en el navegador de cualquier visitante. Es un vector clásico de ataques XSS (cross-site scripting).

La regla de oro es simple:

• Nunca uses v-html con datos que provengan directamente de formularios o inputs de usuario.
• Reserva v-html para HTML controlado, como contenido del servidor o plantillas internas.
• Si necesitas mostrar texto del usuario, usa v-text o la doble llave para que Vue escape los caracteres por defecto.

¿Es seguro usar v-html con datos del backend? Solo si confías plenamente en la fuente y has sanitizado el contenido. Cualquier cadena con scripts puede ejecutarse en el navegador del cliente [07:30].

Qué son las directivas y cómo encajan en el modelo declarativo

Las directivas son funciones disfrazadas de atributos. Reciben argumentos, leen valores y modifican el comportamiento del elemento donde viven, todo sin que tú escribas selectores ni manipules el DOM a mano.

Esta forma declarativa es el corazón de Vue: describes qué quieres que pase y el framework se encarga del cómo. Las directivas oficiales empiezan siempre con v- y la documentación oficial lista decenas de ellas, aunque en la práctica usarás un grupo reducido casi todo el tiempo.

En las próximas clases vas a conocer directivas más potentes para condicionales, listas y enlaces de eventos. ¿Cuál de estas tres usarías primero en tu proyecto actual? Cuéntalo en los comentarios.