close

Xây dựng ứng dụng TodoList với Vue.js

Dưới đây là hướng dẫn chi tiết từng bước với các ví dụ mã cụ thể để xây dựng ứng dụng TodoList với Vue.js:

Bước 1: Thiết lập dự án

Bắt đầu bằng cách tạo một dự án Vue.js mới bằng Vue CLI. Mở terminal của bạn và chạy lệnh sau:

vue create todo-list-app

Thao tác này sẽ tạo một thư mục mới gọi là "todo-list-app" với cấu trúc dự án cơ bản và các thành phần phụ thuộc.

 

Bước 2: Tạo Thành phần TodoList

Trong thư mục "src", tạo một tệp mới có tên "TodoList.vue". Đây sẽ là thành phần chính cho ứng dụng TodoList.

Trong TodoList.vue:

<template>
  <div>
    <h1>TodoList</h1>
    <!-- Render TodoItems here -->
  </div>
</template>

<script>
export default {
  name: 'TodoList',
  data() {
    return {
      todos: [
        { id: 1, text: 'Learn Vue.js', completed: false },
        { id: 2, text: 'Build a TodoList app', completed: false },
        // Add more todo items here
      ]
    };
  }
};
</script>

<style>
/* Add your custom styles here */
</style>

 

Bước 3: Tạo Thành phần TodoItem

Trong thư mục "src", tạo một tệp mới có tên "TodoItem.vue". Đây sẽ là một thành phần con chịu trách nhiệm hiển thị các mục việc cần làm riêng lẻ.

Trong TodoItem.vue:

<template>
  <div :class="{ 'completed': todo.completed }">
    <input type="checkbox" v-model="todo.completed">
    <span>{{ todo.text }}</span>
    <button @click="deleteTodo">Delete</button>
  </div>
</template>

<script>
export default {
  name: 'TodoItem',
  props: ['todo'],
  methods: {
    deleteTodo() {
      // Emit a custom event to notify the parent component (TodoList) to delete this todo item
      this.$emit('delete', this.todo.id);
    }
  }
};
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
</style>

 

Bước 4: Cập nhật Thành phần TodoList

Bên trong TodoList.vue, hãy cập nhật phần mẫu để hiển thị TodoItems bằng chỉ thị v-for.

Trong TodoList.vue:

<template>
  <div>
    <h1>TodoList</h1>
    <div v-for="todo in todos" :key="todo.id">
      <TodoItem :todo="todo" @delete="deleteTodo"></TodoItem>
    </div>
    <!-- Add a form to add new todo items -->
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodoText">
      <button type="submit">Add Todo</button>
    </form>
  </div>
</template>

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

export default {
  name: 'TodoList',
  components: {
    TodoItem
  },
  data() {
    return {
      todos: [
        { id: 1, text: 'Learn Vue.js', completed: false },
        { id: 2, text: 'Build a TodoList app', completed: false },
        // Add more todo items here
      ],
      newTodoText: ''
    };
  },
  methods: {
    deleteTodo(id) {
      // Find the index of the todo item in the array
      const index = this.todos.findIndex(todo => todo.id === id);
      // Remove the item from the array
      this.todos.splice(index, 1);
    },
    addTodo() {
      if (this.newTodoText) {
        // Generate a unique ID for the new todo item
        const newTodoId = this.todos.length + 1;
        // Create a new todo item object and add it to the array
        this.todos.push({
          id: newTodoId,
          text: this.newTodoText,
          completed: false
        });
        // Clear the input field
        this.newTodoText = '';
      }
    }
  }
};
</script>

<style>
/* Add your custom styles here */
</style>

 

Bước 5: Kiểm tra Ứng dụng TodoList


Để kiểm tra ứng dụng TodoList, hãy mở tệp "src/App.vue" và thay thế nội dung hiện có bằng mã sau:

<template>
  <div id="app">
    <TodoList></TodoList>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    TodoList
  }
};
</script>

<style>
/* Add your global styles here */
</style>

 

Bước 6: Chạy ứng dụng


Lưu tất cả các thay đổi và khởi động máy chủ phát triển bằng cách chạy lệnh sau trong thiết bị đầu cuối:

npm run serve

Truy cập http://localhost:8080trong trình duyệt web của bạn để xem ứng dụng TodoList đang hoạt động.

Ví dụ này minh họa chức năng cơ bản của một

Ứng dụng TodoList sử dụng Vue.js. Người dùng có thể xem danh sách các mục việc cần làm, đánh dấu chúng là đã hoàn thành, xóa chúng và thêm các mục mới bằng cách sử dụng biểu mẫu được cung cấp. Trạng thái của các mục việc cần làm được quản lý trong thành phần TodoList, trong khi từng mục việc cần làm riêng lẻ được hiển thị bằng thành phần TodoItem.

Xin lưu ý rằng đây là một triển khai đơn giản hóa và bạn có thể tùy chỉnh và nâng cao ứng dụng hơn nữa dựa trên nhu cầu cụ thể của mình.