Introducción

Vue.js es un framework progresivo de JavaScript utilizado para construir interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde el principio para ser adoptable de manera incremental. La biblioteca central se enfoca solo en la capa de vista, y es fácil de integrar con otras bibliotecas o proyectos existentes. Por otro lado, Vue también es perfectamente capaz de impulsar aplicaciones sofisticadas de una sola página cuando se utiliza en combinación con herramientas modernas y bibliotecas de soporte.

Características Clave de Vue.js

Reactividad Declarativa: Vue.js permite la creación de interfaces de usuario reactivas y declarativas. Esto significa que puedes describir cómo debería verse tu interfaz en función del estado de tus datos, y Vue se encargará de actualizar la vista automáticamente cuando los datos cambien.
Componentes: Vue.js utiliza un sistema basado en componentes, lo que permite encapsular el HTML, CSS y JavaScript de una parte de la interfaz en un solo archivo. Esto facilita la reutilización y el mantenimiento del código.
Directivas: Vue proporciona directivas como v-bind, v-model, v-if, v-for, entre otras, que permiten manipular el DOM de manera declarativa.
Transiciones y Animaciones: Vue.js tiene soporte incorporado para transiciones y animaciones, lo que facilita la creación de interfaces de usuario atractivas y dinámicas.
Ecosistema Rico: Vue cuenta con un ecosistema robusto que incluye Vue Router para el enrutamiento, Vuex para la gestión del estado y Vue CLI para la configuración y el desarrollo de proyectos.

Comparación con Otros Frameworks

Característica	Vue.js	React	Angular
Arquitectura	Progresiva	Biblioteca	Framework
Curva de Aprendizaje	Baja	Moderada	Alta
Reactividad	Reactividad nativa	Reactividad con hooks	Reactividad con RxJS
Componentes	Basados en plantillas	Basados en JSX	Basados en TypeScript
Ecosistema	Vue Router, Vuex	React Router, Redux	Angular Router, NgRx
Tamaño	Ligero	Moderado	Pesado

Ejemplo Básico

A continuación, se muestra un ejemplo básico de una aplicación Vue.js que muestra un mensaje en la pantalla.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script src="app.js"></script>
</body>
</html>

JavaScript (app.js)

new Vue({
  el: '#app',
  data: {
    message: '¡Hola, Vue.js!'
  }
});

Explicación del Código

HTML:
- Incluimos el script de Vue.js desde un CDN.
- Creamos un div con el id app que será el contenedor de nuestra aplicación Vue.
JavaScript:
- Creamos una nueva instancia de Vue y la vinculamos al elemento con el id app.
- Definimos un objeto data que contiene una propiedad message con el valor '¡Hola, Vue.js!'.
- Utilizamos la sintaxis de interpolación {{ message }} en el HTML para mostrar el valor de message.

Ejercicio Práctico

Ejercicio

Crea una aplicación Vue.js que muestre un mensaje de bienvenida y un botón. Al hacer clic en el botón, el mensaje debe cambiar a "¡Has hecho clic en el botón!".

Solución

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Exercise</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="changeMessage">Haz clic aquí</button>
  </div>

  <script src="app.js"></script>
</body>
</html>

JavaScript (app.js)

new Vue({
  el: '#app',
  data: {
    message: 'Bienvenido a Vue.js'
  },
  methods: {
    changeMessage: function() {
      this.message = '¡Has hecho clic en el botón!';
    }
  }
});

Explicación del Código

HTML:
- Añadimos un párrafo <p> para mostrar el mensaje.
- Añadimos un botón con un evento @click que llama al método changeMessage.
JavaScript:
- Definimos un método changeMessage que cambia el valor de message cuando se hace clic en el botón.

Conclusión

En esta lección, hemos aprendido qué es Vue.js, sus características clave y cómo se compara con otros frameworks populares. También hemos visto un ejemplo básico y realizado un ejercicio práctico para reforzar los conceptos aprendidos. En la próxima lección, configuraremos nuestro entorno de desarrollo para empezar a trabajar con Vue.js.

¿Qué es Vue.js?

Introducción

Características Clave de Vue.js

Comparación con Otros Frameworks

Ejemplo Básico

HTML

JavaScript (app.js)

Explicación del Código

Ejercicio Práctico

Ejercicio

Solución

HTML

JavaScript (app.js)

Explicación del Código

Conclusión

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js