یہاں ایک تفصیلی مرحلہ وار گائیڈ ہے جس کے 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 directive کا استعمال کرتے ہوئے s کو TodoList رینڈر کرنے کے لیے ٹیمپلیٹ سیکشن کو اپ ڈیٹ کریں ۔ TodoItem
میں TodoList.vue
:
مرحلہ 5: TodoList درخواست کی جانچ کرنا
ایپلیکیشن کو جانچنے کے لیے TodoList ، "src/App.vue" فائل کو کھولیں اور موجودہ مواد کو درج ذیل کوڈ سے بدل دیں۔
مرحلہ 6: ایپلیکیشن چلانا
تمام تبدیلیوں کو محفوظ کریں اور ٹرمینل میں درج ذیل کمانڈ کو چلا کر ڈویلپمنٹ سرور شروع کریں:
ایپلیکیشن کو عملی شکل میں http://localhost:8080
دیکھنے کے لیے اپنے ویب براؤزر پر جائیں ۔ TodoList
یہ مثال a کی بنیادی فعالیت کو ظاہر کرتی ہے۔
TodoList درخواست کا استعمال کرتے ہوئے Vue.js. صارفین ٹوڈو آئٹمز کی فہرست دیکھ سکتے ہیں، انہیں مکمل کے طور پر نشان زد کر سکتے ہیں، انہیں حذف کر سکتے ہیں، اور فراہم کردہ فارم کا استعمال کرتے ہوئے نئی اشیاء شامل کر سکتے ہیں۔ ٹوڈو آئٹمز کی حالت کو TodoList جزو میں منظم کیا جاتا ہے، جبکہ ہر انفرادی ٹوڈو آئٹم کو TodoItem جزو کا استعمال کرتے ہوئے پیش کیا جاتا ہے۔
براہ کرم نوٹ کریں کہ یہ ایک آسان عمل ہے، اور آپ اپنی مخصوص ضروریات کی بنیاد پر ایپلیکیشن کو اپنی مرضی کے مطابق اور بڑھا سکتے ہیں۔