สร้าง TodoList แอพด้วย Vue.js

นี่คือคำแนะนำทีละขั้นตอนโดยละเอียดพร้อมตัวอย่างโค้ดเฉพาะสำหรับการสร้างแอ TodoList ปพลิเคชันด้วย Vue.js:

ขั้นตอนที่ 1: การตั้งค่าโครงการ

เริ่มต้นด้วยการสร้าง Vue.js โครงการใหม่โดยใช้ Vue CLI เปิดเทอร์มินัลของคุณและรันคำสั่งต่อไปนี้:

vue create todo-list-app

สิ่งนี้จะสร้างไดเร็กทอรีใหม่ที่เรียก todo-list-app ด้วยโครงสร้างโครงการพื้นฐานและการขึ้นต่อกัน

 

ขั้นตอนที่ 2: สร้างไฟล์ TodoList Component

ภายใน src โฟลเดอร์ ให้สร้างไฟล์ใหม่ชื่อ TodoList.vue. นี่จะเป็นองค์ประกอบหลักสำหรับ TodoList แอปพลิเคชัน

ใน 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>

 

ขั้นตอนที่ 3: สร้างไฟล์ TodoItem Component

ภายใน src โฟลเดอร์ ให้สร้างไฟล์ใหม่ชื่อ TodoItem.vue. นี่จะเป็นองค์ประกอบย่อยที่รับผิดชอบในการแสดงรายการสิ่งที่ต้องทำแต่ละรายการ

ใน 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>

 

ขั้นตอนที่ 4: การอัปเดตไฟล์ TodoList Component

ภายใน TodoList.vue ให้อัปเดตส่วนเทมเพลตเพื่อแสดง TodoItem s โดยใช้ v-for directive

ใน 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>

 

ขั้นตอนที่ 5: ทดสอบ TodoList แอปพลิเคชัน

หากต้องการทดสอบ TodoList แอปพลิเคชัน ให้เปิดไฟล์ "src/App.vue" และแทนที่เนื้อหาที่มีอยู่ด้วยรหัสต่อไปนี้:

<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>

 

ขั้นตอนที่ 6: เรียกใช้แอปพลิเคชัน

บันทึกการเปลี่ยนแปลงทั้งหมดและเริ่มเซิร์ฟเวอร์การพัฒนาโดยเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล:

npm run serve

ไป http://localhost:8080 ที่เว็บเบราว์เซอร์ของคุณเพื่อดู TodoList แอปพลิเคชันที่กำลังทำงาน

ตัวอย่างนี้สาธิตการทำงานพื้นฐานของ

TodoList แอปพลิเคชันโดยใช้ Vue.js. ผู้ใช้สามารถดูรายการสิ่งที่ต้องทำ ทำเครื่องหมายว่าเสร็จสิ้น ลบและเพิ่มรายการใหม่โดยใช้แบบฟอร์มที่มีให้ สถานะของรายการสิ่งที่ต้องทำได้รับการจัดการใน TodoList คอมโพเนนต์ ในขณะที่แต่ละรายการสิ่งที่ต้องทำจะถูกแสดงผลโดยใช้ TodoItem คอมโพเนนต์

โปรดทราบว่านี่คือการใช้งานที่เรียบง่าย และคุณสามารถปรับแต่งและปรับปรุงแอปพลิเคชันเพิ่มเติมได้ตามความต้องการเฉพาะของคุณ