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 উপাদান ব্যবহার করে রেন্ডার করা হয়।

দয়া করে মনে রাখবেন যে এটি একটি সরলীকৃত বাস্তবায়ন, এবং আপনি আপনার নির্দিষ্ট প্রয়োজনের উপর ভিত্তি করে অ্যাপ্লিকেশনটিকে আরও কাস্টমাইজ এবং উন্নত করতে পারেন।