Post
Ask Question

Introduction to Vue.js and Building a Simple Todo List

In the ever-evolving landscape of web development, Vue.js has emerged as a powerful and versatile JavaScript framework. Its simplicity, flexibility, and ease of integration have made it a popular choice among developers for building interactive and dynamic web applications. In this three-part series, we'll embark on a journey to explore Vue.js and demonstrate its capabilities by building a simple yet functional todo list application.

Why Vue.js?

Vue.js stands out for several reasons. First and foremost, it's approachable for beginners while providing advanced features for experienced developers. Vue.js embraces a reactive data-binding mechanism, allowing developers to create highly responsive user interfaces effortlessly. Additionally, its progressive nature enables developers to adopt it incrementally, making it suitable for projects of all sizes.

Building the Todo List


Setting Up Vue.js

Before we dive into Vue.js, let's set up a new project. Follow these steps to create a Vue.js project using the Vue CLI:

  1. Install Node.js: Vue CLI requires Node.js, so make sure it's installed on your machine.
  2. Install Vue CLI globally: Run npm install -g @vue/cli to install Vue CLI globally.
  3. Create a new Vue project: Use vue create todo-app to scaffold a new project.

Now that we have our project ready, let's explore the basic structure of a Vue.js component.

Exploring the Basic Structure

A Vue component is the fundamental building block of a Vue.js application. It encapsulates the template, logic, and styles associated with a particular part of the user interface. Here's a simplified structure of a Vue component.

<template>
  <!-- The template defines the structure of the component -->
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  // The script contains the component's logic
  export default {
    data() {
      return {
        message: 'Hello, Vue.js!',
      };
    },
  };
</script>

<style>
  /* The style section handles component-specific styling */
  h1 {
    color: #42b883;
  }
</style>

Creating Todo Components

Now that we're familiar with the Vue component structure, let's start building our to-do list application. We'll create two components: todo-form for adding todos and todo-item for displaying individual to-do items.

Todo Form Component

The todo-form component will handle the input for adding new todos. Let's implement it.

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" placeholder="Add a new todo" />
    <button type="submit">ADD</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
    };
  },
  methods: {
    addTodo() {
      this.$emit('todo-created', this.newTodo);
      this.newTodo = '';
    },
  },
};
</script>

Todo Item Component

The todo-item component will represent an individual to-do item. It will have a dynamic style to strike through completed items.

<template>
  <div @click="completeTodo" :class="{ completed: todo.checked }">
    <span>{{ todo.text }}</span>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  methods: {
    completeTodo() {
      this.$emit('todo-completed', this.todo);
    },
  },
};
</script>

<style>
.completed {
  text-decoration: line-through;
  color: #20ec97;
}
</style>

Dynamic Styling and Event Handling

Dynamic styling in Vue.js is achieved using class bindings (v-bind:class). In our todo-item component, we dynamically apply the completed class based on the completion status of the todo.

Event handling is fundamental for capturing user interactions. We used v-on to listen for the click event on a todo item and emit a custom event (todo-completed) when clicked.

Styling the Todo List

Let's enhance the visual appeal of our to-do list by applying some CSS styles. We'll provide a clean and responsive design to ensure an optimal user experience across various screen sizes.

/* Add this to your styles.css or style section of Vue component */

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu', 'sans-serif';
  background-color: aliceblue;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.todo-container {
  width: 50%;
  height: auto;
  margin: 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-radius: 3px;
  background-color: white;
  box-shadow: 0px 2px 3px 0px rgba(71, 76, 85, 0.562);
}

/* Add more styles for todo-header, todo-form, todo-items, and todo-item as needed */

Testing the Todo List

With our to-do list components and styles in place, let's showcase the working to-do list application. Run your Vue.js project and navigate to the application. You should be able to add new todos and mark them as completed by clicking on them.

In this first part of the series, we've laid the foundation for our Vue.js to-do list application. We introduced Vue.js, discussed its advantages, and walked through setting up a project. We explored the basic structure of a Vue component and created the todo-form and todo-item components. Dynamic styling and event handling were implemented to provide an interactive user experience. Finally, we applied CSS styles to make our to-do list visually appealing and responsive.

Stay tuned for Part 2, where we'll delve deeper into Vue.js concepts like computed properties, methods, and state management, enhancing our to-do list application further. Vue.js proves to be a valuable tool for building interactive web applications, and our journey has just begun!


Similar Articles