Learn programming concepts interactively
Learn Vue.js components step by step
Think of Vue components like custom HTML elements that you create yourself. Just as HTML has elements like <button> and <input>, Vue lets you create your own elements like <TodoItem> or <UserCard>.
Vue follows "progressive enhancement" - you can start simple and add complexity gradually. Components feel natural if you already know HTML, CSS, and JavaScript!
Think of components like ingredients in cooking:
<!-- Traditional HTML - repetitive -->
<div class="user-card">
<img src="john.jpg" alt="John">
<h3>John Doe</h3>
<p>Software Developer</p>
<button>Contact</button>
</div>
<div class="user-card">
<img src="jane.jpg" alt="Jane">
<h3>Jane Smith</h3>
<p>UX Designer</p>
<button>Contact</button>
</div><!-- Vue Component - reusable -->
<template>
<div class="user-card">
<img :src="avatar" :alt="name">
<h3>{{ name }}</h3>
<p>{{ role }}</p>
<button @click="contact">Contact</button>
</div>
</template>
<!-- Usage -->
<UserCard name="John Doe" role="Software Developer" avatar="john.jpg" />
<UserCard name="Jane Smith" role="UX Designer" avatar="jane.jpg" />Vue components eliminate repetition and make your code more maintainable. Notice how the template uses familiar HTML with Vue-specific features like {{ }} and @click.
"text-green-400"><template>
"text-green-400"><div class="todo-item">
<!-- We'll build our first component here -->
<h3>My First Vue Component</h3>
<p>Ready to learn Vue components!</p>
</div>
</template>
<script>
export default {
name: 'TodoItem'
}
"text-green-400"></script>
"text-green-400"><style scoped>
.todo-item {
padding: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
}
"text-green-400"></style>