Vue.js (pronounced view) is a progressive JavaScript framework used to build user interfaces (UIs) and single-page applications (SPAs).
It focuses on the view layer (the part users see) but can easily integrate with other tools or existing projects.
⚙️ Why Use Vue.js?
Here’s why developers love Vue:
- 🧩 Reactive & Declarative — Automatically updates the UI when data changes.
- 🪶 Lightweight & Fast — Small size but powerful features.
- 🧠 Easy to Learn — Simple syntax similar to HTML and JavaScript.
- 🔁 Two-Way Data Binding — Keeps data and UI in sync.
- 🔌 Component-Based — Reusable and modular structure.
- 🧰 Rich Ecosystem — Includes Vue Router (for navigation) and Vuex/Pinia (for state management).
🚀 How to Add Vue.js to a Web Page
Option 1: Using CDN (for beginners)
You can include Vue directly in an HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Vue Example</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello, Vue!"
};
}
});
app.mount('#app');
</script>
</body>
</html>✅ Output:
Displays “Hello, Vue!” on the page.
🧠 Core Concepts
1. The Vue Instance (App)
Every Vue app starts with creating an instance:
const app = Vue.createApp({
data() {
return { message: "Hello Vue!" };
}
});
app.mount("#app");#app → is the HTML element where Vue takes control.
2. Data Binding
You can display dynamic data with mustache syntax ({{ }}):
<p>{{ message }}</p>If message = "Hello Vue!", the page shows that text.
3. Directives
Vue uses directives (special attributes that start with v-) to control behavior.
| Directive | Example | Purpose |
|---|---|---|
v-bind | <img v-bind:src="imageUrl"> | Bind attributes |
v-if | <p v-if="seen">Now you see me!</p> | Conditional rendering |
v-for | <li v-for="item in items">{{ item }}</li> | Loop through lists |
v-on | <button v-on:click="sayHi">Click Me</button> | Handle events |
v-model | <input v-model="name"> | Two-way binding for forms |
4. Methods
You can define custom functions using methods:
const app = Vue.createApp({
data() {
return { count: 0 };
},
methods: {
increment() {
this.count++;
}
}
});HTML:
<div id="app">
<button @click="increment">Add</button>
<p>Count: {{ count }}</p>
</div>5. Computed Properties
Use computed when you need a value that depends on other data.
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}This recalculates automatically whenever message changes.
6. Two-Way Data Binding
With v-model, you can bind input fields to Vue data:
<div id="app">
<input v-model="name" placeholder="Enter your name">
<p>Hello, {{ name }}!</p>
</div>🧩 Components (Building Blocks of Vue)
Vue apps are made of components — small, reusable UI pieces.
Example:
app.component('hello-world', {
template: '<h2>Hello from Component!</h2>'
});Then use it like:
<hello-world></hello-world>🧰 Summary
| Concept | Description |
|---|---|
| Framework Type | Progressive JavaScript Framework |
| Core Feature | Reactive data binding |
| Syntax | HTML-like templates |
| Key Directives | v-bind, v-if, v-for, v-on, v-model |
| App Creation | Vue.createApp({}) |
| Mounting | .mount('#app') |
| Components | Reusable pieces of UI |
💡 Example – Simple Counter App
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<h2>Counter: {{ count }}</h2>
<button @click="count++">Increase</button>
<button @click="count--">Decrease</button>
</div>
<script>
const app = Vue.createApp({
data() {
return { count: 0 };
}
});
app.mount('#app');
</script>
</body>
</html>
I had a question about [specific issue], and I was hoping you could address it in a future post or update the tutorial with some tips on it?
Thank you for explaining this so clearly.