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 directive کا استعمال کرتے ہوئے 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 جزو کا استعمال کرتے ہوئے پیش کیا جاتا ہے۔

براہ کرم نوٹ کریں کہ یہ ایک آسان عمل ہے، اور آپ اپنی مخصوص ضروریات کی بنیاد پر ایپلیکیشن کو اپنی مرضی کے مطابق اور بڑھا سکتے ہیں۔