La interpolación de datos en Vue.js es la base que conecta tu estado con la vista usando dobles llaves dentro del HTML. Si estás aprendiendo a montar tu primer componente con la options API y un CDN, este recorrido te ayuda a entender cómo se enlazan datos, templates y la instancia principal de la aplicación.

Cómo se estructura una aplicación básica en Vue.js

Cuando trabajas con Vue.js como librería dentro de un proyecto de HTML, JavaScript y CSS, todo arranca con un objeto principal que suele guardarse en una variable llamada vm. Ese objeto es la application y contiene toda tu aplicación montada sobre un único elemento HTML, normalmente un div con un id específico.

Dentro de esa instancia puedes tener un componente o muchos más, según lo que necesite tu proyecto. Y aquí viene lo interesante: tienes dos caminos válidos para escalar tu aplicación.

• Crear varias instancias con Vue.createApp apuntando a distintos ids en el HTML, lo que te da aplicaciones completamente separadas.
• Crear componentes anidados dentro del componente principal, todos contenidos en un mismo div raíz.

¿Cuál opción es mejor para un proyecto de Vue.js? La segunda. Crear componentes anidados es lo más común porque comparten contexto y alcance dentro del mismo objeto vm, lo que facilita aprovechar las características avanzadas del framework [02:25].

La primera opción sigue siendo útil cuando solo vas a usar Vue en una sección pequeña o en un widget específico, sin convertir todo el proyecto en una single page application.

Qué significa interpolar datos con dobles llaves

La sintaxis de interpolación aparece en cuanto escribes {{ }} dentro del HTML que controla Vue. En ese espacio puedes meter cualquier expresión válida de JavaScript, siempre que viva dentro del contexto de datos del objeto Vue.

Por ejemplo, una variable text declarada en el estado del componente cumple con las dos condiciones: es expresión válida de JavaScript y existe dentro del contexto de Vue. Por eso aparece renderizada en la vista sin que tú tengas que mover nada más.

¿Puedo escribir lógica compleja dentro de las dobles llaves? Sí es posible, pero no es recomendable. Mantén la lógica separada para que tu código sea fácil de leer, mantener y modificar [03:30].

Meter operaciones largas o condicionales pesados entre llaves convierte tu template en un nudo difícil de seguir. La regla práctica es dejar ahí solo referencias simples al estado.

Por qué tu div se convierte en un template

En el momento en que añades sintaxis de Vue dentro de un div, ese elemento deja de ser HTML plano y pasa a formar parte del componente. En la terminología de Vue.js esto se llama template, y es la pieza que representa la vista del componente.

Recuerda la tríada que vimos antes: cada componente tiene su vista, su modelo y su estado.

• La variable text representa el estado que guarda el contenido.
• El div con las dobles llaves es la vista o template.
• El objeto de opciones de Vue funciona como el modelo que conecta ambos.

Más adelante, cuando construyas componentes más avanzados, vas a poder definir templates directamente dentro del objeto de configuración de Vue. Eso te permite mantenerlos separados, reutilizables y mejor organizados que cuando los escribes inline en el HTML.

Cómo interactúa la instancia vm con el resto del proyecto

La variable vm vive dentro del objeto window de tu documento, así que puedes acceder a ella desde cualquier otro script. Esto abre la puerta a combinar Vue con otros frameworks, librerías o utilidades sin perder control sobre el estado.

Si modificas a mano la variable text desde la consola o desde otro archivo de JavaScript, Vue detecta el cambio y actualiza la vista. Esa reactividad es lo que hace que la interpolación se sienta viva.

Qué cambia al pasar del CDN a la CLI de Vue

La forma de trabajar que estás viendo, con la options API y un CDN, es solo una entrada al ecosistema. Existen otras maneras de construir con Vue.js, y al cierre del curso se aborda cómo hacerlo con la CLI oficial.

Lo bueno es que los conceptos no cambian. Vas a seguir hablando de:

1. Templates que renderizan tu vista.
2. Opciones del componente que definen estado y comportamiento.
3. La instancia de Vue como punto central de la aplicación.

Organiza tus prácticas separando cada clase en su propia rama o archivo dentro de un repositorio de GitHub. Esa disciplina te facilita comparar versiones y volver a un punto anterior cuando experimentes con directivas, renderizado de datos y opciones más avanzadas que vendrán en las próximas clases.

¿Cómo estás organizando tus ramas mientras avanzas en el curso? Cuéntame en los comentarios.