Vue Exercises

Welcome to The Coding College! Practicing is the best way to master Vue.js. Below are hands-on exercises designed for beginners, intermediate learners, and advanced developers. By completing these tasks, you’ll gain a deeper understanding of Vue.js concepts and improve your coding skills.

1. Beginner Exercises

Exercise 1: Hello, Vue!

Task: Create a Vue application that displays “Hello, Vue!” and updates the message when a button is clicked.

Starter Code

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="changeMessage">Change Message</button>
</div>

<script>
  // Write your Vue code here
</script>

Exercise 2: Two-Way Binding

Task: Use the v-model directive to create a text input field that updates a paragraph in real time.

Starter Code

<div id="app">
  <input v-model="text" placeholder="Type something..." />
  <p>You typed: {{ text }}</p>
</div>

<script>
  // Write your Vue code here
</script>

Exercise 3: Conditional Rendering

Task: Add a button that toggles the visibility of a paragraph using v-if.

Starter Code

<div id="app">
  <button @click="toggleVisibility">Toggle Paragraph</button>
  <p v-if="isVisible">This paragraph is visible!</p>
</div>

<script>
  // Write your Vue code here
</script>

2. Intermediate Exercises

Exercise 4: List Rendering with v-for

Task: Display a list of your favorite programming languages using v-for.

Starter Code

<div id="app">
  <ul>
    <li v-for="(language, index) in languages" :key="index">
      {{ language }}
    </li>
  </ul>
</div>

<script>
  // Write your Vue code here
</script>

Exercise 5: Event Handling

Task: Create a counter application that increments and decrements a number.

Starter Code

<div id="app">
  <button @click="decrement">-</button>
  <span>{{ count }}</span>
  <button @click="increment">+</button>
</div>

<script>
  // Write your Vue code here
</script>

Exercise 6: API Fetching

Task: Fetch and display a list of posts from an API. Add a button to trigger the fetch operation.

Starter Code

<div id="app">
  <button @click="fetchPosts">Fetch Posts</button>
  <ul>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</div>

<script>
  // Write your Vue code here
</script>

3. Advanced Exercises

Exercise 7: Parent-Child Communication

Task: Create a parent component that sends data to a child component via props and receives data back via $emit.

Parent Component

<template>
  <div>
    <ChildComponent @messageSent="updateMessage" />
    <p>Message from child: {{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return { message: '' };
  },
  methods: {
    updateMessage(msg) {
      this.message = msg;
    }
  }
};
</script>

Child Component

<template>
  <button @click="$emit('messageSent', 'Hello from the child!')">
    Send Message
  </button>
</template>

Exercise 8: Dynamic Components

Task: Create a Vue app that dynamically switches between components when buttons are clicked.

Starter Code

<template>
  <div>
    <button @click="current = 'ComponentA'">Show Component A</button>
    <button @click="current = 'ComponentB'">Show Component B</button>
    <component :is="current" />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return { current: 'ComponentA' };
  },
  components: { ComponentA, ComponentB }
};
</script>

Exercise 9: Animations and Transitions

Task: Create a toggleable paragraph with a fade-in and fade-out animation.

Starter Code

<template>
  <div>
    <button @click="show = !show">Toggle Paragraph</button>
    <transition name="fade">
      <p v-if="show">This paragraph is animated!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return { show: true };
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

Conclusion

These exercises are designed to help you grasp Vue.js concepts progressively. Start with the beginner exercises to get comfortable, then move on to more advanced challenges to push your skills further.

For more tutorials and practical coding resources, visit The Coding College. Happy coding! 🚀

Leave a Comment