🧰 Vue.js · Estudio ← Índice Qué es Características Casos de uso Script Casos reales Referencia

Estudio de Vue.js

UI ⭐ 204k stars
Framework de UIs conocido por su simplicidad, sistema de reactividad eficiente y extensibilidad.

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

2 · Casos de uso

3 · Script minimalista

Instalación: npm create vue@latest

import { createApp } from 'vue';
createApp({ data: () => ({ msg: 'Hola Vue' }) })
  .mount('#app');

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. Contador con v-model

Un botón incrementa un contador enlazado con v-model.

<script setup>
import { ref } from 'vue';
const contador = ref(0);
</script>

<template>
  <button @click="contador++">Contador: {{ contador }}</button>
</template>
🔁 Cómo funciona: `ref` hace reactivo el valor; `v-model`/`@click` actualizan la UI automáticamente.

2. Lista de tareas con v-for

Renderiza una lista y permite eliminar un elemento.

<script setup>
import { ref } from 'vue';
const tareas = ref(['Comprar', 'Estudiar']);
function eliminar(i) { tareas.value.splice(i, 1); }
</script>

<template>
  <li v-for="(t, i) in tareas" :key="i">
    {{ t }} <button @click="eliminar(i)">✕</button>
  </li>
</template>
🔁 Cómo funciona: `v-for` pinta cada tarea; `splice` sobre el array reactivo actualiza la vista.

5 · Referencia

CategoríaUI
Stars (GitHub)⭐ 204k
Sitio oficialhttps://vuejs.org/
GitHubhttps://github.com/vuejs/vue
Instalaciónnpm create vue@latest
RelacionadasReact.js · Angular · Svelte
📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.