Evaluación

Vue 3.5 es la última versión del framework Vue.js, conocido por su simplicidad y capacidad para construir interfaces de usuario interactivas. Este módulo de nuestro curso está dedicado a ofrecer una visión general de Vuejs 3.5, cubriendo sus características principales y las mejoras introducidas en esta versión.

Instalación de Vue 3.5

Para comenzar con Vue 3.5, es necesario instalar el paquete utilizando npm o yarn. Aquí tienes el comando para instalar Vue 3.5:

npm install vue@3.5

o usando yarn:

yarn add vue@3.5

Estructura de un proyecto Vue 3.5

Un proyecto típico de Vue 3.5 sigue una estructura de directorios bien definida:

• src/: Contiene los componentes y archivos fuente.
• public/: Archivos estáticos.
• package.json: Dependencias y scripts del proyecto.
• vue.config.js: Configuración personalizada de Vue.

Componentes en Vue 3.5

Los componentes son la base de cualquier aplicación Vue. En Vue 3.5, se utilizan componentes de una sola instancia (SFC) que se definen en archivos .vue. A continuación, se muestra un ejemplo básico de un componente:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hola, Vue 3.5!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Composition API

Vue 3.5 introduce la Composition API, que permite una mayor flexibilidad y reutilización de código. Aquí tienes un ejemplo de cómo usarla:

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Incrementar</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment
    }
  }
}
</script>

Teleport

La funcionalidad de Teleport permite renderizar un componente en un lugar diferente del DOM. Es útil para modales y menús contextuales. Ejemplo:

<template>
  <div>
    <teleport to="#modals">
      <div class="modal">
        Este es un modal.
      </div>
    </teleport>
  </div>
</template>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>

Suspense

La etiqueta <Suspense> en Vue 3.5 permite manejar el estado de carga de componentes asíncronos. Ejemplo:

<template>
  <div>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>Cargando...</div>
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));

export default {
  components: {
    AsyncComponent
  }
}
</script>