Vue Academy · Lección

Interpolación y directivas

Utilice la interpolación con llaves y las directivas principales en las plantillas

Interpolación y directivas es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.

Descripción general de la sintaxis de plantillas

Las plantillas de Vue son HTML válido mejorado con una sintaxis especial:

Interpolación con mustaches para el texto
Directivas (atributos con el prefijo v-) para el comportamiento

Vue compila estos elementos en funciones de renderizado eficientes.

Interpolación con mustaches

Las dobles llaves, o sintaxis de mustaches, muestran texto.

El contenido es una expresión de JavaScript, no solo el nombre de una variable.

<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>

v-bind para atributos

Los mustaches no funcionan dentro de los atributos HTML. Use v-bind para vincular datos a un atributo.

<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>

Abreviatura de v-bind

v-bind se usa con tanta frecuencia que tiene una abreviatura: simplemente dos puntos.

<!-- Full syntax -->
<a v-bind:href="url">Link</a>

<!-- Shorthand -->
<a :href="url">Link</a>

v-on para eventos

La directiva v-on escucha eventos del DOM y ejecuta controladores.

<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>

Abreviatura de v-on

v-on también tiene una abreviatura: el símbolo arroba.

<!-- Full syntax -->
<button v-on:click="save">Save</button>

<!-- Shorthand -->
<button @click="save">Save</button>

Controladores en línea frente a métodos

Los controladores de eventos pueden ser expresiones en línea o nombres de métodos.

<!-- Inline expression -->
<button @click="count++">Add</button>

<!-- Method handler -->
<button @click="increment">Add</button>

<!-- Inline with the event object -->
<button @click="log($event)">Log</button>

v-text

La directiva v-text establece el contenido de texto de un elemento. Es equivalente a un mustache.

<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>

v-html

La directiva v-html renderiza una cadena como HTML real, no como texto escapado.

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

<!-- If rawHtml = "<b>Bold</b>",
     it renders actual bold text -->

v-html y precauciones contra XSS

Advertencia: v-html es peligroso con contenido que no sea de confianza.

Puede inyectar scripts maliciosos (ataques XSS)
Úselo únicamente con contenido en el que confíe plenamente
No renderice nunca directamente HTML enviado por usuarios

Para el texto normal, prefiera siempre la interpolación con mustaches, que escapa el HTML.

Argumentos de las directivas

Algunas directivas aceptan un argumento después de dos puntos, como el atributo o evento que deben usar.

<!-- argument is the attribute name -->
<a :href="url">Link</a>

<!-- argument is the event name -->
<button @click="run">Run</button>

<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>

Comprobación rápida

Compruebe cuánto entiende sobre la interpolación y las directivas.

Resumen: interpolación y directivas

Ha aprendido los conceptos básicos de las plantillas de Vue:

{{ }} mediante mustaches muestra expresiones de texto
v-bind (abreviatura :) vincula atributos
v-on (abreviatura @) gestiona eventos
v-text establece el contenido de texto
v-html renderiza HTML sin procesar (riesgo de XSS; úselo con cuidado)

A continuación: condicionales y bucles.

Preguntas frecuentes

¿La lección «Interpolación y directivas» es gratis?

Sí — el texto completo de «Interpolación y directivas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Interpolación y directivas»?

Utilice la interpolación con llaves y las directivas principales en las plantillas Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.

¿Cuánto tiempo toma la lección «Interpolación y directivas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Vue Academy