Vue 1: ¿Qué es Vue? Tu primera app
easy⏱ 5 mincoursevue
createApp + mount
Toda app de Vue se crea con createApp(componenteRaíz) y se adjunta a la página con .mount(selector). El componente raíz es un objeto simple con un template (el markup tipo HTML que Vue renderiza) y, para interactividad, una función setup() que devuelve el estado reactivo y las funciones que el template puede usar.
// main.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
Declarativo vs. imperativo en el DOM
En JavaScript puro tenés que crear elementos a mano, guardar el estado en una variable, y actualizar el DOM manualmente cada vez que ese estado cambia. En Vue simplemente declarás {{ count }} en el template y actualizás count.value++ — Vue descubre exactamente qué cambió y actualiza el DOM por vos, así que nunca escribís código de actualización del DOM vos mismo.
// Plain JS: you must manually create, track, and update the DOM
const btn = document.createElement('button');
btn.textContent = 'Clicked 0 times';
let count = 0;
btn.addEventListener('click', () => {
count++;
btn.textContent = 'Clicked ' + count + ' times'; // manual update!
});
document.body.appendChild(btn);
Construí WelcomeCard
Creá un componente WelcomeCard usando setup() y un ref(0) para count. Su template debe mostrar el contador y un botón que lo incremente al hacer clic. Montalo como App.