Gina TodoList App da Vue.js

Anan ga cikakken jagorar mataki-mataki tare da takamaiman misalan lamba don gina TodoList aikace-aikace tare da Vue.js:

Mataki 1: Saita Aikin

Fara da ƙirƙirar sabon Vue.js aiki ta amfani da Vue CLI. Bude tashar ku kuma gudanar da umarni mai zuwa:

vue create todo-list-app

Wannan zai haifar da sabon kundin adireshi da ake kira todo-list-app tare da ainihin tsarin aikin da abin dogaro.

 

Mataki 2: Ƙirƙirar TodoList Component

A cikin src babban fayil, ƙirƙirar sabon fayil mai suna TodoList.vue. Wannan zai zama babban bangaren aikace TodoList -aikacen.

A cikin 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>

 

Mataki 3: Ƙirƙirar da TodoItem Component

A cikin src babban fayil, ƙirƙirar sabon fayil mai suna TodoItem.vue. Wannan zai zama bangaren yara da ke da alhakin samar da abubuwan da za su yi na mutum ɗaya.

A cikin 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>

 

Mataki 4: Ana ɗaukaka TodoList Component

A cikin TodoList.vue, sabunta sashin samfuri don yin TodoItem s ta amfani da v-don umarni.

A cikin 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>

 

Mataki 5: Gwada Aikace- TodoList aikacen

Don gwada TodoList aikace-aikacen, buɗe fayil ɗin "src/App.vue" kuma maye gurbin abubuwan da ke akwai tare da lambar mai zuwa:

<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>

 

Mataki 6: Gudanar da Aikace-aikacen

Ajiye duk canje-canje kuma fara uwar garken ci gaba ta hanyar gudanar da umarni mai zuwa a cikin tasha:

npm run serve

Ziyarci http://localhost:8080 mai binciken gidan yanar gizon ku don ganin TodoList aikace-aikacen yana aiki.

Wannan misalin yana nuna ainihin aikin a

TodoList aikace-aikace ta amfani da Vue.js. Masu amfani za su iya ganin jerin abubuwan todo, yi musu alama kamar yadda aka kammala, share su, da ƙara sabbin abubuwa ta amfani da sigar da aka bayar. Ana sarrafa yanayin abubuwan todo a cikin TodoList sashin, yayin da kowane abin todo ke yin amfani da TodoItem abun.

Lura cewa wannan sauƙaƙan aiwatarwa ne, kuma zaku iya tsarawa da haɓaka aikace-aikacen gaba bisa takamaiman bukatunku.