Creación de un Demo con Vue.js desde HTML Básico

¿Cómo crear un demo con Vue.js como librería?

Vue.js es una herramienta versátil que se puede emplear como framework completo o como una librería según las necesidades del proyecto. En esta guía, te llevaremos paso a paso por la creación de un demo donde incorporaremos Vue.js a tu HTML existente, añadiendo así contenido dinámico sin transformar completamente tu arquitectura. ¡Vamos a explorar cómo empezar con lo básico!

¿Cuál es el primer paso para integrar Vue.js a un HTML básico?

Iniciaremos trabajando en un archivo HTML básico mientras integramos Vue.js paulatinamente. Esto te permitirá transformar una porción de tu contenido en algo más interactivo. Sigue estos pasos iniciales:

1. Crea un archivo HTML: Abre tu editor de código preferido como Visual Studio Code o, para este tutorial, utilizaremos CodeSandbox para facilitar el proceso.

2. Incorpora Vue.js: En tu documento HTML, agrega una etiqueta script donde importes Vue.js desde una URL específica. Esto te permitirá tener Vue como una variable global accesible en tu código.

3. Configura el entorno de Vue:

   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
   

   Esta línea de código es crucial para empezar a trabajar con Vue.js.

¿Cómo crear y montar una aplicación básica usando Vue.js?

Después de importar Vue.js, el siguiente paso es crear una aplicación básica en Vue y montarla en un elemento del DOM:

1. Define el punto de montaje: Decide en qué parte de tu HTML quieres manejar tu aplicación Vue. Habitualmente, se utiliza un div con un id, por ejemplo:

   <div id="root"></div>
   

2. Escribe el script de tu aplicación: Añade un segundo script en tu HTML después de haber importado Vue.js. Usa la opción createApp para inicializar tu aplicación y el método mount para conectarlo con el div definido:

   const app = Vue.createApp({});
   app.mount('#root');
   

¿Cómo añadir contenido dinámico?

Uno de los puntos fuertes de Vue.js es la capacidad de asociar dinámicamente datos a través de estructuras reactivas. A continuación, se detalla cómo puedes comenzar:

1. Estructura de datos reactiva: En el script de la aplicación, define un método data que devuelva un objeto con tus variables dinámicas.

   const app = Vue.createApp({
     data() {
       return {
         movies: [
           { name: "Avengers", quantity: 0, available: 3 },
           { name: "Terminator", quantity: 0, available: 5 },
         ]
       };
     }
   });
   

2. Listando dinámicamente elementos: Usa atributos especiales de Vue como v-for para iterar sobre la lista de películas y mostrar el contenido:

   <div v-for="movie in movies">
     <h3>{{ movie.name }}</h3>
     <button type="button" @click="movie.quantity--" :disabled="movie.quantity <= 0">-</button>
     {{ movie.quantity }}
     <button type="button" @click="movie.quantity++" :disabled="movie.quantity >= movie.available">+</button>
   </div>
   

3. Interactividad con botones: Usa v-on o su versión abreviada @ para manejar eventos como clics. Estas características permiten modificar propiedades como quantity mediante estos controles dinámicos.

¿Cómo asegurar validaciones y restricciones?

Vue.js facilita la adición de lógicas de validación directamente en la presentación mediante atributos HTML:

• Deshabilitar botones: Emplea condiciones con v-bind o : para determinar cuándo un botón debe estar deshabilitado:

  <button :disabled="movie.quantity <= 0">...</button>
  <button :disabled="movie.quantity >= movie.available">...</button>
  

Con estos pasos, has aprendido a combinar Vue.js como una librería dentro de un simple archivo HTML para ir añadiendo interactividad de forma incremental y efectiva. ¡Sigue explorando nuevas formas de reutilizar componentes en tu desarrollo y experimenta cómo Vue.js puede transformar tus proyectos de formas creativas y eficientes!