Berikut ialah panduan langkah demi langkah terperinci dengan contoh kod khusus untuk membina TodoList aplikasi dengan Vue.js:
Langkah 1: Menyediakan Projek
Mulakan dengan mencipta projek baharu Vue.js menggunakan Vue CLI. Buka terminal anda dan jalankan arahan berikut:
Ini akan mencipta direktori baharu yang dipanggil todo-list-app
dengan struktur projek asas dan kebergantungan.
Langkah 2: Mencipta TodoList Component
Di dalam src
folder, buat fail baharu bernama TodoList.vue
. Ini akan menjadi komponen utama untuk TodoList aplikasi.
dalam TodoList.vue
:
Langkah 3: Mencipta TodoItem Component
Di dalam src
folder, buat fail baharu bernama TodoItem.vue
. Ini akan menjadi komponen kanak-kanak yang bertanggungjawab untuk memberikan item tugasan individu.
dalam TodoItem.vue
:
Langkah 4: Mengemas kini TodoList Component
Di dalam TodoList.vue, kemas kini bahagian templat untuk memaparkan TodoItem s menggunakan arahan v-for.
dalam TodoList.vue
:
Langkah 5: Menguji TodoList Aplikasi
Untuk menguji TodoList aplikasi, buka fail "src/App.vue" dan gantikan kandungan sedia ada dengan kod berikut:
Langkah 6: Menjalankan Aplikasi
Simpan semua perubahan dan mulakan pelayan pembangunan dengan menjalankan arahan berikut dalam terminal:
Lawati http://localhost:8080
dalam pelayar web anda untuk melihat TodoList aplikasi dalam tindakan.
Contoh ini menunjukkan kefungsian asas a
TodoList aplikasi menggunakan Vue.js. Pengguna boleh melihat senarai item todo, menandakannya sebagai selesai, memadamkannya dan menambah item baharu menggunakan borang yang disediakan. Keadaan item todo diuruskan dalam TodoList komponen, manakala setiap item todo individu dipaparkan menggunakan TodoItem komponen.
Sila ambil perhatian bahawa ini adalah pelaksanaan yang dipermudahkan, dan anda boleh menyesuaikan dan mempertingkatkan lagi aplikasi berdasarkan keperluan khusus anda.