Evaluación

Vuejs
Vuejs
Actualizado: 06/10/2024

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

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

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

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>

Completa Vuejs y certifícate

Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración