TodoList Alkalmazás készítése Vue.js

Itt található egy részletes, lépésről lépésre útmutató konkrét kódpéldákkal egy TodoList alkalmazás létrehozásához a következővel Vue.js:

1. lépés: A projekt beállítása

Kezdje új projekt létrehozásával Vue.js a Vue CLI használatával. Nyissa meg a terminált, és futtassa a következő parancsot:

vue create todo-list-app

Ez létrehoz egy új könyvtárat, amelyet todo-list-app az alapvető projektstruktúrával és függőségekkel hívunk meg.

 

2. lépés: A TodoList Component

A src mappán belül hozzon létre egy új fájlt TodoList.vue. Ez lesz az TodoList alkalmazás fő összetevője.

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

 

3. lépés: A TodoItem Component

A src mappán belül hozzon létre egy új fájlt TodoItem.vue. Ez egy gyermekkomponens lesz, amely az egyes teendők megjelenítéséért felelős.

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

 

4. lépés: Frissítse a TodoList Component

A .vue fájlban TodoList frissítse a sablon szakaszt, hogy az TodoItem s a v-for direktívát használva jelenítse meg.

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

 

5. lépés: Az TodoList alkalmazás tesztelése

Az alkalmazás teszteléséhez TodoList nyissa meg az "src/App.vue" fájlt, és cserélje ki a meglévő tartalmat a következő kóddal:

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

 

6. lépés: Az alkalmazás futtatása

Mentse el az összes módosítást, és indítsa el a fejlesztőkiszolgálót a következő parancs futtatásával a terminálon:

npm run serve

Látogassa meg http://localhost:8080 a webböngészőjében az TodoList alkalmazás működésének megtekintéséhez.

Ez a példa az a. alapvető funkcióit mutatja be

TodoList alkalmazás segítségével Vue.js. A felhasználók megtekinthetik a teendők listáját, befejezettként jelölhetik meg, törölhetik őket, és új elemeket adhatnak hozzá a megadott űrlap segítségével. A teendőelemek állapotát az összetevő kezeli TodoList, míg az egyes teendőelemek az TodoItem összetevő használatával jelennek meg.

Kérjük, vegye figyelembe, hogy ez egy egyszerűsített megvalósítás, és az alkalmazást az Ön egyedi igényei szerint testreszabhatja és továbbfejlesztheti.