TodoList Aşağıdakilerle bir uygulama oluşturmak için özel kod örnekleri içeren ayrıntılı bir adım adım kılavuz Vue.js:
1. Adım: Projeyi Kurma
Vue.js Vue CLI kullanarak yeni bir proje oluşturarak başlayın. Terminalinizi açın ve aşağıdaki komutu çalıştırın:
vue create todo-list-app todo-list-app Bu, temel proje yapısı ve bağımlılıkları ile adlandırılan yeni bir dizin yaratacaktır .
2. Adım: TodoList Component
Klasörün içinde src adında yeni bir dosya oluşturun TodoList.vue. Bu, uygulamanın ana bileşeni olacaktır TodoList.
içinde 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>
3. Adım: TodoItem Component
Klasörün içinde src adında yeni bir dosya oluşturun TodoItem.vue. Bu, bireysel yapılacak iş öğelerini işlemekten sorumlu bir alt bileşen olacaktır.
içinde 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>
4. Adım: TodoList Component
.vue içinde TodoList, v-for yönergesini kullanarak s'yi oluşturmak için şablon bölümünü güncelleyin TodoItem.
içinde 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>
5. Adım: Uygulamayı Test TodoList Etme
Uygulamayı test etmek için TodoList "src/App.vue" dosyasını açın ve mevcut içeriği aşağıdaki kodla değiştirin:
<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>
6. Adım: Uygulamayı Çalıştırma
Tüm değişiklikleri kaydedin ve terminalde aşağıdaki komutu çalıştırarak geliştirme sunucusunu başlatın:
npm run serve Uygulamayı çalışırken http://localhost:8080 görmek için web tarayıcınızda ziyaret edin. TodoList
Bu örnek, bir cihazın temel işlevselliğini gösterir.
TodoList kullanarak uygulama Vue.js. Kullanıcılar, yapılacaklar listesini görebilir, tamamlandı olarak işaretleyebilir, silebilir ve sağlanan formu kullanarak yeni öğeler ekleyebilir. Yapılacak iş öğelerinin durumu bileşende yönetilirken TodoList, her bir yapılacak iş öğesi TodoItem bileşen kullanılarak işlenir.
Lütfen bunun basitleştirilmiş bir uygulama olduğunu ve uygulamayı özel ihtiyaçlarınıza göre özelleştirebileceğinizi ve geliştirebileceğinizi unutmayın.