Welcome to Vue.js
The Progressive JavaScript Framework for Building User Interfaces
🚀 Start Your Vue.js Journey
Vue.js is a progressive JavaScript framework for building interactive web interfaces. It's easy to learn, flexible, and powerful for creating modern web applications with reactive data binding.
<!-- Your First Vue App -->
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
Output:
Hello Vue!
Why Learn Vue.js?
Easy to Learn
Simple syntax and clear documentation make Vue perfect for beginners
Reactive Data
Automatic UI updates when your data changes
Component-Based
Build reusable components for efficient development
Flexible
Use as much or as little as you need in your project
🔹 What You'll Learn
This tutorial covers everything you need to start building with Vue.js:
Tutorial Topics:
- Vue Introduction: Understanding Vue basics and setup
- Vue Directives: Special attributes that add functionality
- v-bind: Dynamically bind attributes to data
- v-if: Conditionally render elements
- v-show: Toggle element visibility
🔹 Quick Example
See how Vue makes your HTML interactive with just a few lines of code:
<div id="app">
<p>{{ greeting }}</p>
<button @click="count++">Clicked {{ count }} times</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
greeting: 'Welcome to Vue!',
count: 0
}
}
}).mount('#app')
</script>Output:
Welcome to Vue!
🔹 Getting Started
You can start using Vue in three simple ways:
🔸 Method 1: CDN (Easiest for Beginners)
<script src="https://unpkg.com/vue@3"></script>🔸 Method 2: NPM Installation
npm install vue@latest🔸 Method 3: Create Vue Project
npm create vue@latest