BlogIntroducción a Vue.js

Introducción a Vue.js

Qué es Vue, Options API y Composition API.

Documento 1 de 1 3 secciones

1 ¿Qué es Vue.js?

Vue.js es un framework progresivo de JavaScript creado por Evan You en 2014. Se llama "progresivo" porque puedes adoptarlo gradualmente: úsalo en una pequeña parte de tu página existente o construye una SPA completa.

Vue 3 introdujo la Composition API, una forma de organizar la lógica del componente por funcionalidad en lugar de por tipo de opción. Se puede usar junto con la Options API o reemplazarla completamente.

2 Composition API

typescript
<template>
  <div>
    <h1>{{ titulo }}</h1>
    <p>Contador: {{ contador }}</p>
    <button @click="incrementar">+</button>
    <button @click="decrementar">-</button>

    <ul>
      <li v-for="item in lista" :key="item.id">{{ item.nombre }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const titulo = ref('Mi App Vue');
const contador = ref(0);
const lista = ref([
  { id: 1, nombre: 'JavaScript' },
  { id: 2, nombre: 'Vue.js' }
]);

const incrementar = () => contador.value++;
const decrementar = () => contador.value--;
</script>

3 Directivas Vue

html
<template>
  <div>
    <!-- v-if: condicional -->
    <p v-if="activo">El usuario está activo</p>
    <p v-else>El usuario está inactivo</p>

    <!-- v-show: muestra u oculta con CSS -->
    <div v-show="mostrarPanel">Panel visible</div>

    <!-- v-for: bucle -->
    <ul>
      <li v-for="(fruta, index) in frutas" :key="index">
        {{ index + 1 }}. {{ fruta }}
      </li>
    </ul>

    <!-- v-model: two-way binding -->
    <input v-model="busqueda" placeholder="Buscar...">
    <p>Buscando: {{ busqueda }}</p>
  </div>
</template>

Comentarios

Sé el primero en comentar.

Deja tu comentario

Volver al blog deybidev.com