En este tema, exploraremos la instancia de Vue, que es el núcleo de cualquier aplicación Vue.js. La instancia de Vue es el objeto principal que controla la lógica y el comportamiento de nuestra aplicación. Comprender cómo funciona y cómo se configura es fundamental para desarrollar aplicaciones efectivas con Vue.js.

Para crear una instancia de Vue, utilizamos el constructor Vue. Aquí hay un ejemplo básico:

1. Incluir Vue.js: Primero, incluimos la biblioteca Vue.js en nuestro HTML mediante un CDN.
2. Elemento HTML: Creamos un div con el id app. Este será el contenedor de nuestra aplicación Vue.
3. Instancia de Vue: Creamos una nueva instancia de Vue y la asignamos a la variable app.
   • el: Especifica el elemento HTML que Vue debe controlar. En este caso, es el div con el id app.
   • data: Define los datos que estarán disponibles en la instancia de Vue. Aquí, hemos definido un mensaje simple.

Cuando Vue se inicializa, reemplaza el contenido del div con el id app con el valor de message, que es "Hola, Vue!".

La instancia de Vue tiene varias propiedades y métodos que podemos utilizar para controlar el comportamiento de nuestra aplicación.

• el: El elemento DOM que Vue está controlando.
• data: Los datos que están disponibles en la instancia de Vue.
• methods: Métodos que podemos definir para manejar eventos y lógica de la aplicación.
• computed: Propiedades computadas que dependen de otras propiedades de data.
• watch: Observadores que reaccionan a cambios en las propiedades de data.

1. computed: Definimos una propiedad computada uppercaseMessage que convierte el mensaje a mayúsculas.
2. methods: Definimos un método reverseMessage que invierte el mensaje cuando se hace clic en el botón.

Cada instancia de Vue pasa por una serie de etapas desde su creación hasta su destrucción. Estas etapas se conocen como el ciclo de vida de la instancia de Vue. Vue proporciona varios hooks de ciclo de vida que nos permiten ejecutar código en diferentes etapas del ciclo de vida.

• beforeCreate: Se llama inmediatamente después de que la instancia ha sido inicializada, pero antes de que se hayan configurado las propiedades reactivas.
• created: Se llama después de que la instancia ha sido creada. En este punto, las propiedades reactivas están configuradas.
• beforeMount: Se llama antes de que la instancia sea montada en el DOM.
• mounted: Se llama después de que la instancia ha sido montada en el DOM.
• beforeUpdate: Se llama cuando los datos reactivamente vinculados están a punto de ser actualizados.
• updated: Se llama después de que los datos reactivamente vinculados han sido actualizados.
• beforeDestroy: Se llama antes de que la instancia sea destruida.
• destroyed: Se llama después de que la instancia ha sido destruida.

1. created: Se ejecuta cuando la instancia de Vue ha sido creada.
2. mounted: Se ejecuta cuando la instancia de Vue ha sido montada en el DOM.
3. beforeDestroy: Se ejecuta justo antes de que la instancia de Vue sea destruida.
4. destroyed: Se ejecuta después de que la instancia de Vue ha sido destruida.

En este ejemplo, la instancia de Vue se destruye después de 3 segundos, y podemos ver los mensajes de los hooks de ciclo de vida en la consola.

1. Crea una instancia de Vue que controle un div con el id app.
2. Define una propiedad data llamada counter con un valor inicial de 0.
3. Define un método increment que incremente el valor de counter en 1.
4. Muestra el valor de counter en el div.
5. Añade un botón que llame al método increment cuando se haga clic en él.

1. data: Definimos una propiedad counter con un valor inicial de 0.
2. methods: Definimos un método increment que incrementa el valor de counter en 1.
3. @click: Vinculamos el método increment al evento de clic del botón.

En esta lección, hemos aprendido sobre la instancia de Vue, cómo crearla y configurarla, y cómo utilizar sus propiedades y métodos. También hemos explorado el ciclo de vida de la instancia de Vue y cómo podemos aprovechar los hooks de ciclo de vida para ejecutar código en diferentes etapas. Con esta comprensión, estamos listos para profundizar en los conceptos básicos de Vue.js en el próximo módulo.