Δημιουργία 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.

Σε 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 εφαρμογή σε δράση.

Αυτό το παράδειγμα δείχνει τη βασική λειτουργικότητα του a

TodoList εφαρμογή χρησιμοποιώντας Vue.js. Οι χρήστες μπορούν να δουν μια λίστα με στοιχεία εκκρεμών εργασιών, να τα επισημάνουν ως ολοκληρωμένα, να τα διαγράψουν και να προσθέσουν νέα στοιχεία χρησιμοποιώντας την παρεχόμενη φόρμα. Η διαχείριση της κατάστασης των στοιχείων εκκρεμοτήτων γίνεται στο TodoList στοιχείο, ενώ κάθε μεμονωμένο αντικείμενο εργασίας αποδίδεται χρησιμοποιώντας το TodoItem στοιχείο.

Λάβετε υπόψη ότι αυτή είναι μια απλοποιημένη υλοποίηση και μπορείτε να προσαρμόσετε και να βελτιώσετε περαιτέρω την εφαρμογή με βάση τις συγκεκριμένες ανάγκες σας.