I provided a set of Vue.js exercises for practicing and enhancing Vue.js skills or practice for your interview.
1. Simple Counter
Create a Vue component that displays a counter value. Add buttons to increment and decrement the counter when clicked.
- Create an HTML file (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Counter</title>
</head>
<body>
<div id="app">
<h1>Simple Counter</h1>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
2. Create a JavaScript file (app.js):
// Initialize a new Vue instance
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
});
In this example, we’re using Vue.js to create a simple counter. The HTML file contains a <div> with the ID “app” where the Vue instance will be mounted. Inside the Vue instance, we have a data property called “count” that starts with the value of 0. We also have two methods, “increment” and “decrement”, which modify the “count” value when the corresponding buttons are clicked. The Vue directives {{ count }} are used to display the current count value in the <p> element.
2. Todo List
Build a Vue app that allows users to add, remove, and mark tasks as completed in a todo list.
- Create an HTML file (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
</head>
<body>
<div id="app">
<h1>Todo List</h1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new task">
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo.text }}
<button @click="removeTodo(index)">Remove</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
2. Create a JavaScript file (app.js):
// Initialize a new Vue instance
new Vue({
el: '#app',
data: {
newTodo: '',
todos: []
},
methods: {
addTodo() {
if (this.newTodo.trim() !== '') {
this.todos.push({ text: this.newTodo });
this.newTodo = '';
}
},
removeTodo(index) {
this.todos.splice(index, 1);
}
}
});
In this example, we’re creating a simple Todo List using Vue.js. The HTML file contains an input field to add new tasks and a list to display existing tasks. The Vue instance has a data property called “newTodo” to store the text of the new task and an array called “todos” to store the list of tasks. Two methods are defined: “addTodo” to add a new task to the list and “removeTodo” to remove a task when the “Remove” button is clicked.
3. Image Gallery
Image Gallery Develop a Vue component that displays a grid of images fetched from an API. Add functionality to filter images based on categories or tags.
- Create an HTML file (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
padding: 1rem;
}
.gallery img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="app">
<h1>Image Gallery</h1>
<div class="gallery">
<img v-for="image in images" :src="image" :key="image" @click="openImage(image)">
</div>
<div v-if="selectedImage" class="modal">
<div class="modal-content">
<span class="close" @click="closeImage">×</span>
<img :src="selectedImage">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
- Create a JavaScript file (app.js):
// Initialize a new Vue instance
new Vue({
el: '#app',
data: {
images: [
'image1.jpg',
'image2.jpg',
'image3.jpg',
// Add more image URLs here
],
selectedImage: null
},
methods: {
openImage(image) {
this.selectedImage = image;
},
closeImage() {
this.selectedImage = null;
}
}
});
In this example, we’re creating an image gallery. The HTML file contains a <div> with the ID “app” where the Vue instance will be mounted. Inside the Vue instance, we have a data property called “images” that contains an array of image URLs. We also have a selectedImage property that is initially set to null.
The gallery is created using CSS grid. Each image in the array is displayed using the v-for directive. When an image is clicked, the openImage method is called to set the selectedImage property to the clicked image URL. This opens a modal with the selected image. Clicking the close button (closeImage method) or outside the modal will reset the selectedImage to null, closing the modal.
You can add more image URLs to the images array to display additional images in the gallery.
4. User Authentication
Develop a Vue app that simulates user authentication. Create a login form, implement a mock authentication process, and display protected content only when logged in.
- Create an HTML file (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Authentication</title>
</head>
<body>
<div id="app">
<h1>User Authentication</h1>
<div v-if="!isLoggedIn">
<h2>Login</h2>
<form @submit="login">
<input type="text" v-model="username" placeholder="Username" required>
<input type="password" v-model="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
<div v-else>
<h2>Welcome, {{ username }}!</h2>
<p>This is the protected content that only logged-in users can see.</p>
<button @click="logout">Logout</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
- Create a JavaScript file (app.js):
// Initialize a new Vue instance
new Vue({
el: '#app',
data: {
username: '',
password: '',
isLoggedIn: false
},
methods: {
login(event) {
event.preventDefault(); // Prevent form submission
// Simulate authentication process
if (this.username === 'admin' && this.password === 'password') {
this.isLoggedIn = true;
} else {
alert('Invalid credentials');
}
// Clear form fields
this.username = '';
this.password = '';
},
logout() {
this.isLoggedIn = false;
}
}
});
In this example, we have a Vue instance with the following properties:
username: Stores the input value of the username field in the login form.password: Stores the input value of the password field in the login form.isLoggedIn: Determines whether the user is authenticated or not.
We have two main sections in the HTML template:
- If the user is not logged in (
isLoggedInisfalse), we display a login form with username and password fields. When the form is submitted (@submit="login"), theloginmethod is called. It simulates the authentication process by checking if the provided username and password match the hardcoded values. If the credentials are valid,isLoggedInis set totrueand the protected content is displayed. Otherwise, an alert is shown. - If the user is logged in (
isLoggedInistrue), we display a welcome message with the username and the protected content. We also provide a logout button that triggers thelogoutmethod, which setsisLoggedIntofalse.
You can modify this example to incorporate more features like user registration, authentication with an API, or using Vuex for state management.
These exercises are a fantastic opportunity to enhance your skills. Start with the basics and watch as you quickly become more confident with Vue.js. As you progress, feel free to incorporate additional features and technologies like Vuex for state management or Vue Router for routing. With dedication and practice, you’ll be amazed at how quickly you’ll be able to tackle more complex tasks!