Construirea unei TodoList aplicații cu Vue.js

Iată un ghid detaliat pas cu pas cu exemple de cod specifice pentru construirea unei TodoList aplicații cu Vue.js:

Pasul 1: Configurarea proiectului

Începeți prin a crea un nou Vue.js proiect folosind Vue CLI. Deschideți terminalul și rulați următoarea comandă:

vue create todo-list-app

Acest lucru va crea un nou director numit todo-list-app cu structura de bază a proiectului și dependențe.

 

Pasul 2: Crearea TodoList Component

În interiorul src folderului, creați un fișier nou numit TodoList.vue. Aceasta va fi componenta principală a TodoList aplicației.

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

 

Pasul 3: Crearea TodoItem Component

În interiorul src folderului, creați un fișier nou numit TodoItem.vue. Aceasta va fi o componentă copil responsabilă pentru redarea elementelor individuale de tot.

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

 

Pasul 4: Actualizarea TodoList Component

În interiorul TodoList.vue, actualizați secțiunea șablon pentru a reda s-ul TodoItem folosind directiva v-for.

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

 

Pasul 5: Testarea TodoList aplicației

Pentru a testa TodoList aplicația, deschideți fișierul „src/App.vue” și înlocuiți conținutul existent cu următorul cod:

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

 

Pasul 6: Rularea aplicației

Salvați toate modificările și porniți serverul de dezvoltare rulând următoarea comandă în terminal:

npm run serve

Vizitați http://localhost:8080 în browserul dvs. web pentru a vedea TodoList aplicația în acțiune.

Acest exemplu demonstrează funcționalitatea de bază a unui

TodoList aplicație folosind Vue.js. Utilizatorii pot vedea o listă de articole de făcut, le pot marca ca finalizate, le pot șterge și pot adăuga elemente noi utilizând formularul furnizat. Starea elementelor de tot este gestionată în TodoList componentă, în timp ce fiecare articol individual de tot este redat folosind componenta TodoItem.

Vă rugăm să rețineți că aceasta este o implementare simplificată și puteți personaliza și îmbunătăți aplicația în continuare în funcție de nevoile dvs. specifice.