Membangun TodoList Aplikasi dengan Vue.js

Berikut adalah panduan langkah demi langkah terperinci dengan contoh kode khusus untuk membuat TodoList aplikasi dengan Vue.js:

Langkah 1: Menyiapkan Proyek

Mulailah dengan membuat proyek baru Vue.js menggunakan Vue CLI. Buka terminal Anda dan jalankan perintah berikut:

vue create todo-list-app

Ini akan membuat direktori baru yang disebut todo-list-app dengan struktur dan dependensi proyek dasar.

 

Langkah 2: Membuat TodoList Component

Di dalam src folder, buat file baru bernama TodoList.vue. Ini akan menjadi komponen utama untuk TodoList aplikasi.

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

 

Langkah 3: Membuat TodoItem Component

Di dalam src folder, buat file baru bernama TodoItem.vue. Ini akan menjadi komponen anak yang bertanggung jawab untuk merender item todo individual.

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

 

Langkah 4: Memperbarui TodoList Component

Di dalam TodoList.vue, perbarui bagian template untuk merender s TodoItem menggunakan direktif v-for.

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

 

Langkah 5: Menguji TodoList Aplikasi

Untuk menguji TodoList aplikasi, buka file "src/App.vue" dan ganti konten yang ada dengan kode berikut:

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

 

Langkah 6: Menjalankan Aplikasi

Simpan semua perubahan dan mulai server pengembangan dengan menjalankan perintah berikut di terminal:

npm run serve

Kunjungi http://localhost:8080 di browser web Anda untuk melihat TodoList aplikasi beraksi.

Contoh ini menunjukkan fungsi dasar dari a

TodoList aplikasi menggunakan Vue.js. Pengguna dapat melihat daftar item todo, menandainya sebagai selesai, menghapusnya, dan menambahkan item baru menggunakan formulir yang disediakan. Status item todo dikelola dalam TodoList komponen, sedangkan setiap item todo individual dirender menggunakan TodoItem komponen.

Harap dicatat bahwa ini adalah implementasi yang disederhanakan, dan Anda dapat menyesuaikan dan menyempurnakan aplikasi lebih lanjut berdasarkan kebutuhan spesifik Anda.