beginner#Vue.js#Todo List#Beginner
Building a Simple Todo List App with Vue.js
Learn how to create a basic Todo List application using Vue.js and its core features.
Introduction to Vue.js Todo List App
In this tutorial, we will build a simple Todo List application using Vue.js. This application will allow users to add, remove, and mark tasks as completed.
Step 1: Setting up the Project
First, we need to set up a new Vue.js project. We can do this by running the following command in our terminal:
npm install -g @vue/cli
vue create todo-list-app
Step 2: Creating the Todo List Component
Next, we need to create a new component for our Todo List. We can do this by creating a new file called TodoList.vue in the src/components directory:
<template>
<div>
<h1>Todo List</h1>
<ul>
<li v-for='todo in todos' :key='todo.id'>
<input type='checkbox' v-model='todo.completed'>
<span :class='{ completed: todo.completed }'>{{ todo.text }}</span>
<button @click='removeTodo(todo)'>Remove</button>
</li>
</ul>
<input type='text' v-model='newTodo' @keyup.enter='addTodo'>
</div>
</template>
<script>
export default {
data() {
return {
todos: [],
newTodo: ''
}
},
methods: {
addTodo() {
this.todos.push({ text: this.newTodo, completed: false, id: Math.random() });
this.newTodo = '';
},
removeTodo(todo) {
this.todos = this.todos.filter(t => t.id !== todo.id);
}
}
}
</script>
<style>
.completed {
text-decoration: line-through;
}
</style>
Step 3: Adding the Todo List Component to the App
Finally, we need to add the Todo List component to our App component. We can do this by modifying the App.vue file:
<template>
<div>
<TodoList/>
</div>
</template>
<script>
import TodoList from './components/TodoList.vue'
export default {
components: { TodoList }
}
</script>
Now we can run our application using npm run serve and see our Todo List in action.