Ndërtimi i një TodoList aplikacioni me Vue.js

Këtu është një udhëzues i detajuar hap pas hapi me shembuj kodesh specifikë për ndërtimin e një TodoList aplikacioni me Vue.js:

Hapi 1: Vendosja e projektit

Filloni duke krijuar një Vue.js projekt të ri duke përdorur Vue CLI. Hapni terminalin tuaj dhe ekzekutoni komandën e mëposhtme:

vue create todo-list-app

Kjo do të krijojë një drejtori të re të quajtur todo-list-app me strukturën bazë të projektit dhe varësitë.

 

Hapi 2: Krijimi i TodoList Component

Brenda src dosjes, krijoni një skedar të ri të quajtur TodoList.vue. Ky do të jetë komponenti kryesor për aplikacionin TodoList.

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

 

Hapi 3: Krijimi i TodoItem Component

Brenda src dosjes, krijoni një skedar të ri të quajtur TodoItem.vue. Ky do të jetë një komponent fëmijësh përgjegjës për paraqitjen e artikujve individualë të detyrave.

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

 

Hapi 4: Përditësimi i TodoList Component

Brenda TodoList.vue, përditësoni seksionin e shabllonit për të dhënë TodoItem s duke përdorur direktivën v-for.

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

 

Hapi 5: Testimi i TodoList aplikacionit

Për të testuar TodoList aplikacionin, hapni skedarin "src/App.vue" dhe zëvendësoni përmbajtjen ekzistuese me kodin e mëposhtëm:

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

 

Hapi 6: Ekzekutimi i aplikacionit

Ruani të gjitha ndryshimet dhe filloni serverin e zhvillimit duke ekzekutuar komandën e mëposhtme në terminal:

npm run serve

Vizitoni http://localhost:8080 në shfletuesin tuaj të internetit për të parë TodoList aplikacionin në veprim.

Ky shembull demonstron funksionalitetin bazë të a

TodoList aplikacioni duke përdorur Vue.js. Përdoruesit mund të shohin një listë të artikujve të detyrave, t'i shënojnë si të përfunduara, t'i fshijnë dhe të shtojnë artikuj të rinj duke përdorur formularin e dhënë. Gjendja e artikujve të detyrave menaxhohet në TodoList komponent, ndërsa çdo artikull individual për të bërë bëhet duke përdorur komponentin TodoItem.

Ju lutemi vini re se ky është një zbatim i thjeshtuar dhe ju mund ta personalizoni dhe përmirësoni aplikacionin më tej bazuar në nevojat tuaja specifike.