Bygge en TodoList app med Vue.js

Her er en detaljert trinn-for-trinn-guide med spesifikke kodeeksempler for å bygge en TodoList applikasjon med Vue.js:

Trinn 1: Sette opp prosjektet

Start med å lage et nytt Vue.js prosjekt ved å bruke Vue CLI. Åpne terminalen og kjør følgende kommando:

vue create todo-list-app

Dette vil opprette en ny katalog kalt todo-list-app med den grunnleggende prosjektstrukturen og avhengighetene.

 

Trinn 2: Opprette TodoList Component

Inne i src mappen oppretter du en ny fil kalt TodoList.vue. Dette vil være hovedkomponenten for applikasjonen TodoList.

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>

 

Trinn 3: Opprette TodoItem Component

Inne i src mappen oppretter du en ny fil kalt TodoItem.vue. Dette vil være en underordnet komponent som er ansvarlig for å gjengi individuelle gjø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>

 

Trinn 4: Oppdatering av TodoList Component

Inne i TodoList.vue oppdaterer du maldelen for å gjengi s- TodoItem ene med 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>

 

Trinn 5: Testing av TodoList applikasjonen

For å teste TodoList applikasjonen åpner du filen "src/App.vue" og erstatter det eksisterende innholdet 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>

 

Trinn 6: Kjøre applikasjonen

Lagre alle endringene og start utviklingsserveren ved å kjøre følgende kommando i terminalen:

npm run serve

Besøk http://localhost:8080 i nettleseren din for å se TodoList applikasjonen i aksjon.

Dette eksemplet viser den grunnleggende funksjonaliteten til en

TodoList applikasjon som bruker Vue.js. Brukere kan se en liste over gjøremål, merke dem som fullførte, slette dem og legge til nye elementer ved å bruke det medfølgende skjemaet. Tilstanden til gjøremålselementene administreres i komponenten TodoList, mens hvert enkelt gjøremålselement gjengis ved hjelp av TodoItem komponenten.

Vær oppmerksom på at dette er en forenklet implementering, og du kan tilpasse og forbedre applikasjonen ytterligere basert på dine spesifikke behov.