Opbygning af en TodoList app med Vue.js

Her er en detaljeret trin-for-trin guide med specifikke kodeeksempler til at bygge en TodoList applikation med Vue.js:

Trin 1: Opsætning af projektet

Start med at oprette et nyt Vue.js projekt ved hjælp af Vue CLI. Åbn din terminal og kør følgende kommando:

vue create todo-list-app

Dette vil oprette en ny mappe kaldet todo-list-app med den grundlæggende projektstruktur og afhængigheder.

 

Trin 2: Oprettelse af TodoList Component

Inde i src mappen skal du oprette en ny fil kaldet TodoList.vue. Dette vil være hovedkomponenten i TodoList applikationen.

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

 

Trin 3: Oprettelse af TodoItem Component

Inde i src mappen skal du oprette en ny fil kaldet TodoItem.vue. Dette vil være en underordnet komponent, der er ansvarlig for at gengive individuelle gøremål.

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

 

Trin 4: Opdatering af TodoList Component

Inde i TodoList.vue skal du opdatere skabelonafsnittet for at gengive s'erne TodoItem ved hjælp af v-for-direktivet.

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

 

Trin 5: Test af TodoList applikationen

For at teste TodoList applikationen skal du åbne filen "src/App.vue" og erstatte det eksisterende indhold med følgende kode:

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

 

Trin 6: Kørsel af applikationen

Gem alle ændringerne og start udviklingsserveren ved at køre følgende kommando i terminalen:

npm run serve

Besøg http://localhost:8080 i din webbrowser for at se TodoList applikationen i aktion.

Dette eksempel viser den grundlæggende funktionalitet af en

TodoList applikation ved hjælp af Vue.js. Brugere kan se en liste over gøremål, markere dem som afsluttede, slette dem og tilføje nye elementer ved hjælp af den medfølgende formular. Todo-elementernes tilstand administreres i komponenten TodoList, mens hver enkelt opgave-element gengives ved hjælp af TodoItem komponenten.

Bemærk venligst, at dette er en forenklet implementering, og du kan tilpasse og forbedre applikationen yderligere baseret på dine specifikke behov.