VueJS 2 Components: Tạo và quản lý ToDo List đơn giản

Bạn đã bao giờ muốn hiểu rõ cách VueJS 2 giúp bạn tạo và quản lý các thành phần (components) không?

Trong bài viết này, mình sẽ tìm hiểu cách tạo và quản lý một ToDo List đơn giản trong VueJS 2. Từ việc xây dựng components cho đến truyền dữ liệu và xử lý sự kiện, mình sẽ tìm hiểu tạo ứng dụng ToDo List bằng VueJS 2 trong việc xây dựng ứng dụng một cách linh hoạt và tiện lợi.

Mục tiêu của tạo ứng dụng ToDo List bằng VueJS 2

Mô tả về quá trình tạo và quản lý ToDo List sử dụng components trong VueJS 2.

• Components trong VueJS 2: Giới thiệu về khái niệm components và cách chúng giúp chia nhỏ giao diện thành các phần nhỏ hơn, dễ quản lý.
• Tạo và Tương tác Components: Hướng dẫn cách tạo components trong VueJS 2 và cách chúng tương tác với nhau để xây dựng một ToDo List hoàn chỉnh.

Hiểu cách tạo components, truyền dữ liệu và sử dụng các sự kiện để quản lý danh sách ToDo.

Bài viết này được đăng tại [free tuts .net]

• Tạo Components: Hướng dẫn cách tạo component cha (App.vue) và các component con (ToDoList.vue) để tạo cấu trúc cho ToDo List.
• Truyền dữ liệu (Props): Giải thích cách sử dụng props để truyền dữ liệu từ component cha đến component con.
• Sử dụng sự kiện (Events): Thực hiện việc sử dụng events để quản lý sự kiện khi thêm và xóa mục ToDo từ danh sách.

Bài viết sẽ đi sâu vào từng bước, cung cấp ví dụ cụ thể và cách thực hiện để đảm bảo người đọc có thể hiểu và áp dụng kiến thức một cách dễ dàng khi tạo và quản lý một ToDo List đơn giản trong VueJS 2.

Tạo ứng dụng ToDo List bằng VueJS 2

Chuẩn bị môi trường làm việc

Hướng dẫn cài đặt VueJS 2 hoặc sử dụng VueJS thông qua CDN:

Cài đặt VueJS 2:

• Sử dụng Node.js và npm/yarn để cài đặt VueJS 2.
• Tạo dự án VueJS mới:

vue create project-name

• Khởi động dự án:

npm run serve.

Sử dụng VueJS qua CDN:

• Nhúng VueJS qua các liên kết CDN vào file HTML.
• Bắt đầu viết code VueJS trực tiếp trong file HTML hoặc thông qua <script> tags.

Tạo Components bằng VueJS 2

Component cha - App.vue

File App.vue sẽ là component cha chứa giao diện chính và các components con.

<template>
  <div>
    <h1>ToDo List</h1>
    <ToDoList :todos="todos" @addTodo="addTodo" @deleteTodo="deleteTodo" />
  </div>
</template>

<script>
import ToDoList from './components/ToDoList.vue';

export default {
  name: 'App',
  components: {
    ToDoList,
  },
  data() {
    return {
      todos: [],
      newTodo: '',
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      }
    },
    deleteTodo(index) {
      this.todos.splice(index, 1);
    },
  },
};
</script>

Component con - ToDoList.vue

File ToDoList.vue là component con hiển thị danh sách ToDo và chức năng thêm, xóa ToDo.

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new ToDo" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="deleteTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ToDoList',
  props: ['todos'],
  data() {
    return {
      newTodo: '',
    };
  },
  methods: {
    addTodo() {
      this.$emit('addTodo');
    },
    deleteTodo(index) {
      this.$emit('deleteTodo', index);
    },
  },
};
</script>

Quản lý ToDo List bằng VueJS 2

Binding dữ liệu và sự kiện

• Sử dụng v-model: Liên kết dữ liệu nhập vào input với biến newTodo.
• Sử dụng v-for: Duyệt qua danh sách ToDo và hiển thị chúng trên giao diện.

Xử lý sự kiện

• Thêm ToDo mới: Khi người dùng nhập một ToDo mới và nhấn Enter, thực hiện thêm ToDo vào danh sách.
• Xóa ToDo: Khi người dùng nhấn nút "Delete" kèm theo mỗi ToDo, thực hiện xóa ToDo tương ứng từ danh sách.

Bằng cách áp dụng các bước này, bạn có thể tạo và quản lý một ToDo List đơn giản sử dụng VueJS 2 một cách hiệu quả và linh hoạt.

Kết bài

Việc tạo và quản lý một ToDo List đơn giản trong VueJS 2 đã giúp mình thấy rõ sức mạnh của việc sử dụng components để xây dựng các ứng dụng web linh hoạt và dễ quản lý. VueJS 2 cung cấp cho mình các công cụ mạnh mẽ để tạo ra các components và tương tác giữa chúng một cách dễ dàng.

Qua quá trình này, mình đã:

• Tạo Components: Xây dựng component cha và component con để tạo cấu trúc cho ToDo List.
• Truyền dữ liệu và sử dụng sự kiện: Sử dụng props để truyền dữ liệu từ component cha đến component con và events để gửi các sự kiện lên component cha.
• Binding dữ liệu và sự kiện: Sử dụng v-model để liên kết dữ liệu và v-for để duyệt qua danh sách ToDo.
• Xử lý sự kiện: Thêm và xóa ToDo từ danh sách thông qua các sự kiện người dùng.

Những khái niệm này không chỉ giúp hiểu rõ về VueJS 2 mà còn mở ra cánh cửa cho việc xây dựng các ứng dụng phức tạp hơn trong tương lai.

Hãy tiếp tục thực hành và tìm hiểu thêm về VueJS 2 để xây dựng những ứng dụng tuyệt vời hơn nữa. Sự linh hoạt và tiện ích của VueJS 2 chắc chắn sẽ đồng hành cùng bạn trong hành trình phát triển ứng dụng web. Chúc bạn thành công và vui vẻ trong việc sáng tạo với VueJS 2!