Vue.js earns its reputation as the approachable framework for a reason: you can drop it into a single HTML page with a script tag, or scale it into a full single-page app with a build pipeline. This tutorial covers the core ideas you need either way.
Reactivity: the heart of Vue
Vue tracks the data you give it and automatically updates the DOM when that data changes. You never write document.getElementById(...).innerText = ... — you just change a variable, and the template re-renders.
const app = Vue.createApp({
data() {
return { count: 0 }
}
})
app.mount('#app')In your HTML, <button @click="count++">{{ count }}</button> is enough to wire a click handler to that reactive value — no manual re-render call anywhere.
Components: breaking the UI into pieces
Almost nothing in a real Vue app lives in one file. A component bundles its own template, logic, and (optionally) styles, and can be reused anywhere.
app.component('user-card', {
props: ['name', 'role'],
template: `<div class="card">
<h4>{{ name }}</h4>
<p>{{ role }}</p>
</div>`
})Props flow data down from parent to child; events flow information back up with $emit. That one-directional flow is what keeps larger apps predictable.
The directives that do the heavy lifting
v-if/v-show— conditionally render or hide an elementv-for— loop over a list and render a template per itemv-model— two-way bind a form input to a data propertyv-bind(shorthand:) — bind an attribute to a JS expression
Always key your v-for.
<li v-for="item in items" :key="item.id"> lets Vue track which DOM node belongs to which data item, instead of guessing from position — this avoids subtle rendering bugs when the list reorders.
Composition API vs Options API
The examples above use the Options API (data, methods, computed as object keys). Vue 3 also offers the Composition API, built around ref() and reactive() inside a setup() function, which groups code by feature rather than by option type — useful once components grow large. Start with the Options API to learn the concepts; switch to Composition once you feel the file getting unwieldy.
Where to go next
Once these pieces click, the Vue Router and Pinia (state management) are the natural next steps for building a multi-page app with shared state. Both integrate the same way you've just learned: reactive data flowing through components.
Comments