Integrar Vue.js de forma progresiva en un archivo HTML es una de las grandes ventajas que ofrece este framework. En lugar de migrar toda una aplicación de golpe, puedes añadir interactividad poco a poco, convirtiendo contenido estático en dinámico sin necesidad de configurar un proyecto completo. A continuación se explica paso a paso cómo construir un pequeño sistema de películas con botones de sumar y restar cantidad, usando Vue.js en modo librería.
¿Cómo se integra Vue.js en un archivo HTML estático?
Vue.js puede funcionar como framework completo con componentes y todo su ecosistema de herramientas, o como librería ligera que se importa directamente en un archivo HTML. Para este demo se utiliza la segunda opción [0:35].
El primer paso es crear una etiqueta <script> que apunte a la URL del CDN de Vue.js. Esto deja disponible Vue como variable global en el navegador [1:03]. Luego se crea un segundo bloque <script> donde se escribe el código propio:
html
<script src="https://unpkg.com/vue@3"></script>
<script>
const app = Vue.createApp({
// código de la aplicación
}).mount('#root');
</script>
La función createApp inicializa la instancia de Vue, y el método mount le indica en qué elemento del DOM debe renderizarse. En este caso se usa un <div id="root"> como contenedor [1:45].
¿Cómo se renderizan listas dinámicas con v-for?
Dentro de createApp se define un método llamado data que retorna un objeto con las propiedades reactivas de la aplicación. Aquí se coloca el array de películas [3:05]:
javascript
data() {
return {
movies: [
{ name: 'Avengers', quantity: 0, available: 3 },
{ name: 'Terminator', quantity: 0, available: 5 }
]
}
}
Para que el HTML repita un formulario por cada película, se usa la directiva v-for directamente en la etiqueta <form> [3:40]:
html
<form v-for="movie in movies">
<h3>{{ movie.name }}</h3>
</form>
La sintaxis de doble llave ({{ }}) funciona de manera similar a Angular: interpola valores dinámicos dentro del HTML. Si aparece el texto literal en vez del valor, conviene revisar errores de sintaxis como comas duplicadas en el array [4:15].
¿Cómo funcionan los eventos y el binding en Vue.js?
Para que los botones modifiquen la cantidad de películas se utiliza la directiva v-on:click, que indica a Vue que debe encargarse del evento en lugar de dejarlo como un atributo HTML común [5:10]:
html
<button type="button" v-on:click="movie.quantity -= 1">-</button>
<button type="button" v-on:click="movie.quantity += 1">+</button>
- El operador -= resta uno a
movie.quantity.
- El operador += suma uno.
- Es importante usar
type="button" para evitar que el formulario se recargue.
¿Cómo deshabilitar botones con v-bind?
Para impedir que la cantidad baje de cero o supere el número de cupos disponibles, se usa el atributo disabled. Sin embargo, HTML lo interpreta como texto plano. Para que Vue lo evalúe como expresión se necesita v-bind, o su atajo con dos puntos (:) [6:20]:
html
<button type="button"
:disabled="movie.quantity <= 0"
v-on:click="movie.quantity -= 1">-</button>
<button type="button"
:disabled="movie.quantity >= movie.available"
v-on:click="movie.quantity += 1">+</button>
- El botón de restar se deshabilita cuando
quantity es menor o igual a cero.
- El botón de sumar se deshabilita cuando
quantity alcanza el valor de available.
- Terminator permite hasta cinco cupos y Avengers hasta tres [7:30].
¿Por qué usar Vue.js en modo librería?
Esta forma de trabajar es la más sencilla para ir integrando Vue.js en proyectos existentes. No requiere compiladores, bundlers ni configuración adicional. Solo un CDN y unas pocas directivas bastan para transformar HTML estático en una interfaz reactiva. Más adelante, cuando se necesiten Vue Components, estilos con CSS-in-JS o preprocesadores, se puede escalar al modo framework completo.
¿Ya probaste integrar Vue.js como librería en algún proyecto propio? Comparte tu experiencia en los comentarios.
