TodoList यहां एप्लिकेशन बनाने के लिए विशिष्ट कोड उदाहरणों के साथ एक विस्तृत चरण-दर-चरण मार्गदर्शिका दी गई है Vue.js:
चरण 1: परियोजना की स्थापना
Vue.js Vue CLI का उपयोग करके एक नया प्रोजेक्ट बनाकर प्रारंभ करें । अपना टर्मिनल खोलें और निम्नलिखित कमांड चलाएँ:
todo-list-app
यह मूल परियोजना संरचना और निर्भरताओं के साथ एक नई निर्देशिका बनाएगा ।
चरण 2: बनाना TodoList Component
फ़ोल्डर के अंदर src
, एक नई फ़ाइल बनाएं जिसका नाम TodoList.vue
. यह एप्लिकेशन का मुख्य घटक होगा TodoList.
में TodoList.vue
:
चरण 3: बनाना TodoItem Component
फ़ोल्डर के अंदर src
, एक नई फ़ाइल बनाएं जिसका नाम TodoItem.vue
. यह एक चाइल्ड घटक होगा जो व्यक्तिगत कार्य आइटम प्रस्तुत करने के लिए जिम्मेदार होगा।
में TodoItem.vue
:
चरण 4: अद्यतन करना TodoList Component
.vue के अंदर, v-for निर्देश का उपयोग करके s को TodoList रेंडर करने के लिए टेम्पलेट अनुभाग को अपडेट करें । TodoItem
में TodoList.vue
:
चरण 5: TodoList आवेदन का परीक्षण
एप्लिकेशन का परीक्षण करने के लिए TodoList, "src/App.vue" फ़ाइल खोलें और मौजूदा सामग्री को निम्नलिखित कोड से बदलें:
चरण 6: एप्लिकेशन चलाना
सभी परिवर्तन सहेजें और टर्मिनल में निम्नलिखित कमांड चलाकर विकास सर्वर शुरू करें:
एप्लिकेशन को क्रियाशील http://localhost:8080
देखने के लिए अपने वेब ब्राउज़र पर जाएँ । TodoList
यह उदाहरण a की बुनियादी कार्यक्षमता को प्रदर्शित करता है
TodoList एप्लिकेशन का उपयोग करना Vue.js । उपयोगकर्ता कार्य आइटमों की एक सूची देख सकते हैं, उन्हें पूर्ण के रूप में चिह्नित कर सकते हैं, उन्हें हटा सकते हैं, और दिए गए फॉर्म का उपयोग करके नए आइटम जोड़ सकते हैं। कार्य आइटम की स्थिति को TodoList घटक में प्रबंधित किया जाता है, जबकि प्रत्येक व्यक्तिगत कार्य आइटम को TodoItem घटक का उपयोग करके प्रस्तुत किया जाता है।
कृपया ध्यान दें कि यह एक सरलीकृत कार्यान्वयन है, और आप अपनी विशिष्ट आवश्यकताओं के आधार पर एप्लिकेशन को और अधिक अनुकूलित और बढ़ा सकते हैं।