Вот подробное пошаговое руководство с конкретными примерами кода для создания TodoList приложения с помощью Vue.js:
Шаг 1: Настройка проекта
Начните с создания нового Vue.js проекта с помощью Vue CLI. Откройте терминал и выполните следующую команду:
vue create todo-list-app Это создаст новый каталог todo-list-app с базовой структурой проекта и зависимостями.
Шаг 2: Создание TodoList Component
Внутри src папки создайте новый файл с именем TodoList.vue. Это будет основной компонент приложения TodoList.
В 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: Создание TodoItem Component
Внутри src папки создайте новый файл с именем TodoItem.vue. Это будет дочерний компонент, отвечающий за рендеринг отдельных элементов todo.
В 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: Обновление TodoList Component
Внутри TodoList.vue обновите раздел шаблона, чтобы отображать TodoItem s с помощью директивы v-for.
В 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: Тестирование TodoList приложения
Чтобы протестировать TodoList приложение, откройте файл «src/App.vue» и замените существующее содержимое следующим кодом:
<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: Запуск приложения
Сохраните все изменения и запустите сервер разработки, выполнив в терминале следующую команду:
npm run serve Зайдите http://localhost:8080 в свой веб-браузер, чтобы увидеть TodoList приложение в действии.
Этот пример демонстрирует базовую функциональность
TodoList приложение с помощью Vue.js. Пользователи могут просматривать список задач, отмечать их как завершенные, удалять и добавлять новые, используя предоставленную форму. Состояние элементов задач управляется в TodoList компоненте, в то время как каждый отдельный элемент задач визуализируется с помощью TodoItem компонента.
Обратите внимание, что это упрощенная реализация, и вы можете дополнительно настраивать и улучшать приложение в зависимости от ваших конкретных потребностей.