Aprender la sintaxis básica de Vue.js es el primer paso para construir aplicaciones reactivas sin pelearte con el DOM. Aquí verás cómo montar una app desde un CDN, declarar datos con la Options API y entender por qué Vue se llama un Model View.

¿Cómo se monta una aplicación Vue.js en HTML?

Todo proyecto Vue arranca desde un elemento HTML que actúa como contenedor. La idea es decirle al framework dónde vivirá tu aplicación y dejar que él se encargue del resto.

Lo primero es crear un div con un identificador. Por convención se usa app, aunque puedes nombrarlo como quieras siempre que lo referencies igual desde JavaScript [01:30].

html

<div id="app"> {{ text }} </div>

Dentro de un <script>, llamas a la instancia global de Vue y montas la app sobre ese identificador:

js const vm = Vue.createApp({ data() { return { text: "Hola Vue" } } }).mount("#app")

¿Qué hace createApp en Vue.js? Crea una nueva instancia de aplicación a partir de un objeto de configuración. Luego, con .mount("#app"), conectas esa instancia a un elemento del DOM para que Vue tome el control.

¿Por qué Vue.js es un framework progresivo?

Porque puedes integrarlo poco a poco. No necesitas reescribir tu sitio: basta con incluir el CDN y usarlo como una librería más sobre HTML existente [00:45]. Esa flexibilidad te permite empezar con un solo componente y escalar cuando lo necesites.

¿Qué es la Options API y cómo se usa data?

La Options API es la forma de configurar componentes en Vue mediante un objeto JSON con propiedades reservadas que el framework reconoce: data, methods, computed, entre otras [03:10].

La propiedad data es siempre una función que retorna un objeto. Dentro de ese objeto declaras las variables que tu componente va a usar y mostrar.

js data() { return { text: "Hola Vue" } }

Cualquier variable definida ahí queda disponible para la plantilla. Y aquí viene lo interesante: Vue las vuelve reactivas automáticamente.

¿Cómo muestro variables en la plantilla con doble llave?

Usas la sintaxis de interpolación con dobles llaves {{ }}. Dentro puedes colocar cualquier expresión de JavaScript válida en una sola línea: una variable, una operación matemática o una concatenación [04:20].

html

<div id="app"> {{ text }} </div>

Cuando Vue encuentra {{ text }}, lo reemplaza por el valor de la variable declarada en data. Sin getElementById, sin createElement, sin manipular el DOM a mano.

¿Qué es una expresión en JavaScript? Es cualquier operación que produce un valor en una sola línea, como 2 + 2, nombre.toUpperCase() o simplemente una variable. Vue acepta expresiones, no sentencias completas, dentro de {{ }}.

¿Qué es el Model View y por qué importa en Vue.js?

Vue.js se posiciona como el Model View dentro del patrón MVVM (Model View ViewModel). Su trabajo es sincronizar el modelo, tus datos en JavaScript, con la vista, lo que ve el usuario en HTML [06:15].

Cuando llamas a .mount(), la función retorna la instancia de la aplicación. Por convención de la comunidad, esa instancia se guarda en una variable llamada vm:

js const vm = Vue.createApp({ /* ... */ }).mount("#app")

Esa variable es un proxy al objeto reactivo. Si abres la consola y escribes vm.text = "Segundo texto", la página se actualiza al instante sin que toques el DOM [07:00]. Esa es la magia de la reactividad: tú cambias el dato, Vue actualiza la vista.

¿Cuál es la diferencia con JavaScript Vanilla?

En Vanilla tendrías que seleccionar el elemento, leer su contenido y reescribirlo cada vez que algo cambia. En Vue declaras qué quieres mostrar y el framework se encarga de mantenerlo sincronizado.

• Declaras una variable en data y la consumes con {{ }}.
• Modificas la variable y la vista responde sola.
• Te enfocas en la lógica, no en la manipulación manual del DOM.

Con esta base ya puedes construir componentes más complejos. En las siguientes clases entran directivas, métodos y propiedades computadas que amplían lo que la Options API puede hacer. ¿Qué parte te gustaría profundizar primero? Cuéntalo en los comentarios.