Getting Started with Vue.js
Why Vue?
Reactive Data Binding
Automatically updates the DOM when data changes
Component-Based
Build encapsulated, reusable components
Easy to Learn
Gentle learning curve with excellent documentation
Installation
There are several ways to add Vue to your project:
Using Vite (Recommended)
npm create vue@latest
cd my-vue-app
npm install
npm run dev
Using CDN
For quick prototyping, you can include Vue directly via CDN:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
Reactivity Basics
Vue's reactivity system automatically tracks dependencies and updates the DOM when data changes.
<script setup>
import { ref, computed } from "vue"
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">Count: {{ count }}</button>
<p>Doubled: {{ doubled }}</p>
</template>
Template Directives
Vue provides powerful directives for DOM manipulation:
Conditional Rendering
<template>
<div v-if="isLoggedIn">Welcome back!</div>
<div v-else>Please log in</div>
<div v-show="isVisible">This toggles visibility</div>
</template>
List Rendering
<script setup>
const items = ref([
{ id: 1, name: "Apple" },
{ id: 2, name: "Banana" },
{ id: 3, name: "Cherry" },
])
</script>
<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>
Two-Way Binding
<script setup>
const message = ref("")
</script>
<template>
<input v-model="message" placeholder="Type something" />
<p>You typed: {{ message }}</p>
</template>
Components and Props
Create reusable components that accept props:
<!-- GreetingCard.vue -->
<script setup>
defineProps({
name: String,
age: Number,
})
</script>
<template>
<div class="card">
<h2>Hello, {{ name }}!</h2>
<p>You are {{ age }} years old.</p>
</div>
</template>
Use the component with props:
<template>
<GreetingCard name="Alice" :age="25" />
</template>
Emitting Events
Components can emit events to communicate with parents:
<!-- ChildComponent.vue -->
<script setup>
const emit = defineEmits(["update", "delete"])
function handleClick() {
emit("update", { id: 1, value: "new data" })
}
</script>
<template>
<button @click="handleClick">Update</button>
<button @click="emit('delete')">Delete</button>
</template>
<!-- ParentComponent.vue -->
<template>
<ChildComponent @update="handleUpdate" @delete="handleDelete" />
</template>
Lifecycle Hooks
Vue components have lifecycle hooks for running code at specific stages:
<script setup>
import { onMounted, onUpdated, onUnmounted } from "vue"
onMounted(() => {
console.log("Component mounted to DOM")
// Fetch data, set up subscriptions
})
onUpdated(() => {
console.log("Component updated")
})
onUnmounted(() => {
console.log("Component unmounted")
// Clean up subscriptions, timers
})
</script>
Vue DevTools
Install the Vue DevTools browser extension for debugging:
DevTools lets you inspect component hierarchy, state, props, and events in real-time.