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:
vue create todo-list-app 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:
<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: 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:
<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: Mengemas kini TodoList Component
Di dalam TodoList.vue, kemas kini bahagian templat untuk memaparkan TodoItem s menggunakan arahan v-for.
dalam 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 fail "src/App.vue" dan gantikan kandungan sedia ada dengan kod 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 mulakan pelayan pembangunan dengan menjalankan arahan berikut dalam terminal:
npm run serve 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.