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 ਕੰਪੋਨੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰੈਂਡਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

ਕਿਰਪਾ ਕਰਕੇ ਨੋਟ ਕਰੋ ਕਿ ਇਹ ਇੱਕ ਸਰਲ ਲਾਗੂਕਰਨ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਆਪਣੀਆਂ ਖਾਸ ਲੋੜਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਹੋਰ ਵਿਉਂਤਬੱਧ ਅਤੇ ਵਧਾ ਸਕਦੇ ਹੋ।