Rakenna TodoList sovellus Vue.js

Tässä on yksityiskohtainen vaiheittainen opas, jossa on erityisiä koodiesimerkkejä sovelluksen TodoList rakentamiseen Vue.js:

Vaihe 1: Projektin määrittäminen

Aloita luomalla uusi Vue.js projekti Vue CLI:n avulla. Avaa terminaali ja suorita seuraava komento:

vue create todo-list-app

Tämä luo uuden hakemiston, jota kutsutaan todo-list-app projektin perusrakenteella ja riippuvuuksilla.

 

Vaihe 2: Luo TodoList Component

Luo kansioon src uusi tiedosto nimeltä TodoList.vue. Tämä on sovelluksen pääkomponentti TodoList.

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

 

Vaihe 3: Luo TodoItem Component

Luo kansioon src uusi tiedosto nimeltä TodoItem.vue. Tämä on alikomponentti, joka vastaa yksittäisten tehtäväkohteiden hahmontamisesta.

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

 

Vaihe 4: Päivitä TodoList Component

Päivitä TodoList.vue-tiedoston malliosio hahmontamaan s TodoItem v-for-direktiivin avulla.

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

 

Vaihe 5: Sovelluksen TodoList testaus

Testaa sovellusta TodoList avaamalla "src/App.vue"-tiedosto ja korvaamalla olemassa oleva sisältö seuraavalla koodilla:

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

 

Vaihe 6: Suorita sovellus

Tallenna kaikki muutokset ja käynnistä kehityspalvelin suorittamalla seuraava komento päätteessä:

npm run serve

Vieraile http://localhost:8080 selaimessasi nähdäksesi sovelluksen TodoList toiminnassa.

Tämä esimerkki osoittaa a.:n perustoiminnot

TodoList sovellus käyttäen Vue.js. Käyttäjät voivat nähdä luettelon tehtävistä, merkitä ne suoritetuiksi, poistaa niitä ja lisätä uusia kohteita käyttämällä annettua lomaketta. Tehtäväkohteiden tilaa hallitaan komponentissa TodoList, kun taas jokainen yksittäinen tehtäväkohde hahmonnetaan komponentin avulla TodoItem.

Huomaa, että tämä on yksinkertaistettu toteutus, ja voit mukauttaa ja parantaa sovellusta edelleen erityistarpeidesi mukaan.