Kuunda TodoList Programu na Vue.js

Hapa kuna mwongozo wa kina wa hatua kwa hatua na mifano maalum ya nambari ya kuunda TodoList programu na Vue.js:

Hatua ya 1: Kuanzisha Mradi

Anza kwa kuunda mradi mpya Vue.js kwa kutumia Vue CLI. Fungua terminal yako na uendesha amri ifuatayo:

vue create todo-list-app

Hii itaunda saraka mpya inayoitwa todo-list-app na muundo wa msingi wa mradi na utegemezi.

 

Hatua ya 2: Kutengeneza TodoList Component

Ndani ya src folda, unda faili mpya inayoitwa TodoList.vue. Hii itakuwa sehemu kuu ya TodoList programu.

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

 

Hatua ya 3: Kutengeneza TodoItem Component

Ndani ya src folda, unda faili mpya inayoitwa TodoItem.vue. Hiki kitakuwa kipengele cha mtoto chenye jukumu la kutoa vitu vya mtu binafsi vya kufanya.

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

 

Hatua ya 4: Kusasisha TodoList Component

Ndani ya TodoList.vue, sasisha sehemu ya kiolezo ili kutoa TodoItem s kwa kutumia v-kwa maagizo.

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

 

Hatua ya 5: Kujaribu TodoList Maombi

Ili kujaribu TodoList programu, fungua faili ya "src/App.vue" na ubadilishe maudhui yaliyopo kwa msimbo ufuatao:

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

 

Hatua ya 6: Kuendesha Maombi

Hifadhi mabadiliko yote na anza seva ya ukuzaji kwa kuendesha amri ifuatayo kwenye terminal:

npm run serve

Tembelea http://localhost:8080 katika kivinjari chako cha wavuti ili kuona TodoList programu inavyofanya kazi.

Mfano huu unaonyesha utendakazi msingi wa a

TodoList maombi kwa kutumia Vue.js. Watumiaji wanaweza kuona orodha ya vipengee vya kufanya, kuviweka alama kuwa vimekamilika, kuvifuta na kuongeza vipengee vipya kwa kutumia fomu iliyotolewa. Hali ya vipengee vya todo inadhibitiwa katika TodoList kijenzi, ilhali kila kipengee cha todo kinatolewa kwa kutumia TodoItem kijenzi hicho.

Tafadhali kumbuka kuwa huu ni utekelezaji uliorahisishwa, na unaweza kubinafsisha na kuboresha programu zaidi kulingana na mahitaji yako mahususi.