Learn Vue
Vue is a progressive JavaScript framework that lets you build interactive user interfaces by describing state and letting Vue keep the DOM in sync automatically.
What Is Vue?
Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is called "progressive" because you can adopt it incrementally: drop a single script tag into an existing page to sprinkle in interactivity, or use it as the foundation of a full application with routing, state management, and a build pipeline. At its heart, Vue lets you describe what the UI should look like for a given piece of state, and Vue takes care of updating the DOM whenever that state changes.
How Reactivity Works
When you hand Vue a plain JavaScript object inside a component's data() function, Vue wraps it in a reactive proxy. That proxy intercepts every property read and write. When your template reads a property, Vue records that the template depends on it. When your code later writes to that property, Vue notifies every part of the UI that depends on it and re-renders only what changed. You never call a render function yourself or manually patch the DOM — you just change the data, and the view catches up.
- Declarative templates — HTML-based syntax that binds directly to component state
- Automatic reactivity — changing data updates the DOM without manual DOM calls
- Component-based architecture — UIs are built from small, reusable, self-contained pieces
- Two authoring styles — the Options API (used throughout this course) and the Composition API
- A rich official ecosystem — Vue Router, state libraries, and browser dev tools
Creating Your First App
Every Vue application starts the same way: you call createApp() with a root component object, then mount it onto a DOM element using .mount(). The example below loads Vue from a CDN and mounts a tiny counter app onto a div with id="app".
A Minimal Vue App
<!DOCTYPE html>
<html>
<body>
<div id="app">
<h3>{{ title }}</h3>
<button @click="count++">Clicked {{ count }} times</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
title: 'Hello, Vue!',
count: 0
}
}
})
app.mount('#app')
</script>
</body>
</html>The Options API Shape
In the Options API, a component is a plain JavaScript object with reserved option names. Vue reads these options when it creates the component instance and wires them together for you.
data, methods, and computed together
const app = Vue.createApp({
data() {
return {
firstName: 'Ada',
lastName: 'Lovelace'
}
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
},
methods: {
shout() {
alert(this.fullName.toUpperCase())
}
}
})
app.mount('#app')Reactivity updates multiple bindings at once
const app = Vue.createApp({
data() {
return {
price: 25,
quantity: 3
}
},
computed: {
total() {
return this.price * this.quantity
}
},
methods: {
addOne() {
this.quantity++
}
}
})
app.mount('#app')
<!-- template -->
<div id="app">
<p>Price: {{ price }} x Quantity: {{ quantity }}</p>
<p>Total: {{ total }}</p>
<button @click="addOne">Add one</button>
</div>Exercise: Vue Introduction
What is Vue.js primarily designed to help you build?
Frequently Asked Questions
- Is Vue easier to learn than React?
- Most beginners find it so. Templates look like HTML, the documentation is unusually clear, and less JavaScript knowledge is needed to become productive. React has the larger job market, which is the main argument on the other side.
- What is the difference between the Options and Composition API?
- The Options API organises a component into fixed sections such as data and methods, which reads clearly for small components. The Composition API groups code by feature instead, which scales better in large components and makes logic easier to reuse.
- Do I need to know JavaScript before Vue?
- Yes, though less than some frameworks demand upfront. Functions, objects, arrays and array methods carry most beginner work. Modules and async become necessary as soon as the app talks to an API.
