Een app bouwen TodoList met Vue.js

Hier is een gedetailleerde stapsgewijze handleiding met specifieke codevoorbeelden voor het bouwen van een TodoList applicatie met Vue.js:

Stap 1: het opzetten van het project

Begin met het maken van een nieuw Vue.js project met behulp van Vue CLI. Open uw terminal en voer de volgende opdracht uit:

vue create todo-list-app

Hiermee wordt een nieuwe map gemaakt todo-list-app met de basisprojectstructuur en afhankelijkheden.

 

Stap 2: Het maken van de TodoList Component

src Maak in de map een nieuw bestand met de naam TodoList.vue. Dit wordt het belangrijkste onderdeel van de TodoList applicatie.

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

 

Stap 3: Het maken van de TodoItem Component

src Maak in de map een nieuw bestand met de naam TodoItem.vue. Dit wordt een onderliggende component die verantwoordelijk is voor het weergeven van individuele todo-items.

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

 

Stap 4: het updaten van de TodoList Component

Werk in TodoList.vue de sjabloonsectie bij om de TodoItem s weer te geven met v-for-richtlijn.

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

 

Stap 5: de TodoList applicatie testen

Om de TodoList toepassing te testen, opent u het bestand "src/App.vue" en vervangt u de bestaande inhoud door de volgende code:

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

 

Stap 6: De toepassing uitvoeren

Sla alle wijzigingen op en start de ontwikkelingsserver door de volgende opdracht in de terminal uit te voeren:

npm run serve

Bezoek http://localhost:8080 in uw webbrowser om de TodoList applicatie in actie te zien.

Dit voorbeeld demonstreert de basisfunctionaliteit van een

TodoList toepassing met behulp van Vue.js. Gebruikers kunnen een lijst met todo-items bekijken, ze als voltooid markeren, ze verwijderen en nieuwe items toevoegen met behulp van het meegeleverde formulier. De status van de todo-items wordt beheerd in de TodoList component, terwijl elk afzonderlijk todo-item wordt weergegeven met behulp van de TodoItem component.

Houd er rekening mee dat dit een vereenvoudigde implementatie is en dat u de toepassing verder kunt aanpassen en verbeteren op basis van uw specifieke behoeften.