Pengantar

Dalam tutorial ini, kita akan belajar cara membuat aplikasi To-Do List sederhana menggunakan Vue.js. Vue.js adalah framework JavaScript yang sangat populer dan mudah digunakan untuk membangun antarmuka pengguna yang interaktif. Dengan aplikasi To-Do List ini, Anda akan memahami dasar-dasar penggunaan Vue.js serta konsep reaktivitasnya.

Persiapan

Sebelum kita mulai, pastikan Anda telah menginstal Node.js dan npm di komputer Anda. Anda juga perlu memiliki editor kode seperti Visual Studio Code untuk menulis dan mengedit kode Anda.

Membuat Proyek Vue.js

Untuk membuat proyek baru, buka terminal dan jalankan perintah berikut:

vue create todo-list

Pilih preset default saat diminta. Setelah proses selesai, masuk ke direktori proyek:

cd todo-list

Selanjutnya, jalankan server pengembangan dengan perintah:

npm run serve

Buka browser Anda dan akses http://localhost:8080 untuk melihat aplikasi Anda yang baru dibuat.

Struktur Aplikasi

Setelah proyek dibuat, kita perlu mengatur struktur aplikasi. Buka file src/App.vue dan modifikasi isinya menjadi seperti berikut:

  

    
To-Do List
    
    

      

        {{ task }}
        Hapus
      
    
  



export default {
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push(this.newTask);
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    }
  }
};



/* Tambahkan gaya CSS sesuai kebutuhan */

Menambahkan Fitur

Kita telah menambahkan fitur dasar untuk menambah dan menghapus tugas. Namun, Anda juga dapat menambahkan fitur lain seperti menandai tugas sebagai selesai atau menyimpan tugas ke local storage agar tetap ada saat aplikasi dimuat ulang.

Untuk menambahkan fitur menandai tugas, Anda bisa memodifikasi struktur tasks menjadi array objek dengan status:

tasks: [{ text: 'Tugas 1', completed: false }]

Selanjutnya, Anda dapat menambahkan logika untuk menandai tugas sebagai selesai dan mengubah tampilan berdasarkan status tersebut.

Kesimpulan

Dalam tutorial ini, kita telah membuat aplikasi To-Do List sederhana menggunakan Vue.js. Anda telah belajar tentang struktur dasar aplikasi Vue, cara menambahkan dan menghapus tugas, serta beberapa ide untuk mengembangkan aplikasi lebih lanjut. Dengan pemahaman ini, Anda dapat mulai mengeksplorasi lebih banyak fitur dan meningkatkan aplikasi Anda sesuai kebutuhan.