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

.vue के अंदर, v-for निर्देश का उपयोग करके s को TodoList रेंडर करने के लिए टेम्पलेट अनुभाग को अपडेट करें । TodoItem

में 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 घटक का उपयोग करके प्रस्तुत किया जाता है।

कृपया ध्यान दें कि यह एक सरलीकृत कार्यान्वयन है, और आप अपनी विशिष्ट आवश्यकताओं के आधार पर एप्लिकेशन को और अधिक अनुकूलित और बढ़ा सकते हैं।