Iki minangka pandhuan langkah-langkah kanthi rinci kanthi conto kode khusus kanggo mbangun TodoList aplikasi kanthi Vue.js:
Langkah 1: Nggawe Proyek
Mulai nggawe Vue.js proyek anyar nggunakake Vue CLI. Bukak terminal lan jalanake printah ing ngisor iki:
vue create todo-list-app Iki bakal nggawe direktori anyar sing diarani todo-list-app struktur proyek dhasar lan dependensi.
Langkah 2: Nggawe TodoList Component
Ing src folder kasebut, gawe file anyar sing diarani TodoList.vue. Iki bakal dadi komponen utama kanggo TodoList aplikasi kasebut.
Ing 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: Nggawe TodoItem Component
Ing src folder kasebut, gawe file anyar sing diarani TodoItem.vue. Iki bakal dadi komponen anak tanggung jawab kanggo Rendering item todo individu.
Ing 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: Nganyari TodoList Component
Nang TodoList.vue, nganyari bagean cithakan kanggo nerjemahake s TodoItem nggunakake v-kanggo direktif.
Ing 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: Nguji TodoList Aplikasi
Kanggo nyoba TodoList aplikasi kasebut, bukak file "src/App.vue" lan ganti konten sing wis ana nganggo kode ing ngisor iki:
<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: Mbukak Aplikasi
Simpen kabeh pangowahan lan miwiti server pangembangan kanthi nglakokake perintah ing ngisor iki ing terminal:
npm run serve Dolan http://localhost:8080 maring browser web kanggo ndeleng TodoList aplikasi ing tumindak.
Conto iki nduduhake fungsi dhasar saka a
TodoList aplikasi nggunakake Vue.js. Pangguna bisa ndeleng dhaptar item todo, menehi tandha minangka rampung, mbusak, lan nambah item anyar nggunakake formulir sing kasedhiya. Kahanan item todo diatur ing TodoList komponèn, dene saben item todo individu diwenehake nggunakake TodoItem komponen kasebut.
Wigati dimangerteni manawa iki minangka implementasine sing disederhanakake, lan sampeyan bisa ngatur lan nambah aplikasi luwih adhedhasar kabutuhan tartamtu.