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.

In 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. ეს იქნება შვილობილი კომპონენტი, რომელიც პასუხისმგებელია ცალკეული სამუშაო ნივთების გაწევაზე.

In 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

.vue-ის შიგნით TodoList განაახლეთ შაბლონის განყოფილება, რომ TodoItem s-ის გამოტანა v-for დირექტივის გამოყენებით.

In 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. მომხმარებლებს შეუძლიათ ნახონ სამუშაოს ელემენტების სია, მონიშნონ ისინი დასრულებულად, წაშალონ ისინი და დაამატონ ახალი ელემენტები მოწოდებული ფორმის გამოყენებით. todo ერთეულების მდგომარეობა იმართება კომპონენტში TodoList, ხოლო თითოეული ცალკეული todo ელემენტი გამოსახულია კომპონენტის გამოყენებით TodoItem.

გთხოვთ, გაითვალისწინოთ, რომ ეს გამარტივებული განხორციელებაა და თქვენ შეგიძლიათ დააკონფიგურიროთ და გააუმჯობესოთ აპლიკაცია თქვენი კონკრეტული საჭიროებიდან გამომდინარე.