Vue 1: What Is Vue? Your First App
easy⏱ 5 mincoursevue
createApp + mount
Every Vue app is created with createApp(rootComponent) and attached to the page with .mount(selector). The root component is just a plain object with a template (the HTML-like markup Vue renders) and, for interactivity, a setup() function that returns the reactive state and functions the template can use.
// main.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
Declarative vs. imperative DOM
In plain JavaScript you must manually create elements, track state in a variable, and update the DOM by hand every time that state changes. In Vue you just declare {{ count }} in the template and update count.value++ — Vue figures out exactly what changed and patches the DOM for you, so you never write DOM-update code yourself.
// 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);
Build WelcomeCard
Create a WelcomeCard component using setup() and a ref(0) for count. Its template should show the count and a button that increments it on click. Mount it as App.