The Vue-based ToDoList project is a common exercise project used to learn the basic concepts and practices of Vue.js. Here is a summary of the project:
1. **Project Goal**: The main goal of the ToDoList project is to create a simple web application that allows users to list to-do items and add, delete, and mark tasks as completed.
2. **Technology stack**: This project usually uses the Vue.js framework to build the front end, combined with HTML and CSS. Vue provides functions such as data binding, componentization, and virtual DOM, making development easier.
3. **Core functions**: The main functions include adding to-do items, deleting to-do items, marking tasks as completed or incomplete, and usually include filtering and search functions to make it easier for users to manage tasks.
4. **Component-based development**: Vue projects usually split applications into multiple components, such as task list components, task item components, filter components, etc. This componentized development makes the code easier to maintain and extend.
5. **State Management**: Vue projects usually use Vuex or Vue’s responsive data to manage the state of the application. This facilitates sharing data across components and enabling synchronous updates of task status.
6. **Routing**: For more complex ToDoList projects, you can use Vue Router to manage navigation between different pages, allowing users to create multiple task lists.
7. **Data Persistence**: Some projects will use local storage or backend APIs to achieve data persistence so that users can access their to-do items across different devices and sessions.
8. **Responsive Design**: Make sure your ToDoList application displays properly on different screen sizes and devices, using responsive design principles.
9. **User Experience**: Focus on user experience, make the interface intuitive, and provide clear feedback, such as prompts or animation effects for successfully adding tasks.
10. **Testing**: Write unit tests and end-to-end tests to ensure the stability of your application during development and maintenance.
Overall, the Vue-based ToDoList project is a good learning exercise that covers many important concepts and techniques in front-end development, including the use of Vue.js, component development, state management, routing, and responsive design. and user experience. By completing projects like this, you can improve your front-end development skills.
css code:
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
.header {
width: 100%;
height: 100px;
background-color: black;
}
.title {
width: 500px;
height: 100px;
font-size: 24px;
text-align: center;
line-height: 100px;
float: left;
color: aliceblue;
margin: 0 auto;
}
.subtitle {
width: 500px;
height: 100px;
font-size: 20px;
text-align: center;
line-height: 100px;
color: aliceblue;
float: left;
margin: 0 auto;
}
.input {
width: 100%;
height: 200px;
position: relative;
background-color: rgb(74, 72, 72);
}
.input input {
display: block;
width: 500px;
height: 50px;
font-size: 20px;
text-indent: 2em;
border-radius: 20px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.list {
width: 100%;
background-color: rgb(189, 211, 219);
font-size: 20px;
padding-left: 400px;
}
.list input {
width: 20px;
height: 20px;
}
.list button {
width: 40px;
height: 40px;
float: right;
border-radius: 30px;
background-color: red;
}
.listli{
width: 1000px;
height: 50px;
line-height: 50px;
border: 1px solid gray;
position: relative;
margin-bottom: 10px;
}
vue
<div id="app">
<div class="header">
<div class="title">To-do list</div>
<div class="subtitle">ToDoList...</div>
</div>
<div class="input">
<input type="text" placeholder="Please enter a new to-do event" v-model.trim="inputValue" ref="inputRef"
@keydown.enter="handleAdd">
</div>
<div class="list">
<h3>In progress ({<!-- -->{ uncompletedTodos.length }})</h3>
<div class="empty" v-if="uncompletedTodos.length === 0">
To-do list is empty, please add a new one!
</div>
<ul v-else ref="listRef">
<li v-for="todo of uncompletedTodos" :key="todo.id">
<input type="checkbox" v-model="todo.completed" /> - <span>{<!-- -->{ todo.title }}</span> -
<span class="dd">{<!-- -->{ todo.completed ? 'has' : 'not' }}completed</span>
<button @click="handleRemove(todo.id)">Delete</button>
</li>
</ul>
<h3>Completed ({<!-- -->{ completedTodos.length }})</h3>
<div class="empty" v-if="completedTodos.length === 0">
To-do list is empty, please add a new one!
</div>
<ul v-else ref="listRef">
<li v-for="todo of completedTodos" :key="todo.id">
<input type="checkbox" v-model="todo.completed" /> - <span>{<!-- -->{ todo.title }}</span> -
<span class="dd">{<!-- -->{ todo.completed ? 'has' : 'not' }}completed</span>
<button @click="handleRemove(todo.id)">Delete</button>
</li>
</ul>
</div>
</div>
<script src="./lib/vue.global.js"></script>
<script>
const app = Vue.createApp({
//Data, returned through factory method
data() {
//Initialize two pieces of test to-do data
const _todos = [
{ id: Math.random(), title: 'Review JavaScript', completed: true },
{ id: Math.random(), title: 'Review Vue', completed: false },
]
return {
todos: _todos, // array of all to-do items
inputValue: '', //The value in the text box
}
},
computed: {
// Array of completed to-do items
completedTodos() {
return this.todos.filter((todo) => todo.completed)
},
// Array of unfinished to-do items
uncompletedTodos() {
return this.todos.filter((todo) => !todo.completed)
},
},
// method
methods: {
/**
* Add new to-do items
*/
handleAdd() {
// Let the text box automatically gain focus
// document.querySelector('input[type="text"]').focus()
// Use ref to get the DOM object
this.$refs.inputRef.focus()
// console.log('refs:', this.$refs)
// Get the input value of the text box
const val = this.inputValue
// Determine whether the text box content is empty
if (val === '') {
return
}
//Create a new to-do object
const todo = {
id: Math.random(),
title: val,
completed: false,
}
//Add the current new to-do item to the array and save it
this.todos.push(todo)
//Clear the content in the text box
this.inputValue = ''
console.log('The button was clicked...', this.inputValue)
},
/**
* Delete to-do items
*/
handleRemove(id) {
//Which item to delete is obtained through the parameter id
this.todos = this.todos.filter((todo) => todo.id !== id)
},
},
})
// mount
app.mount('#app')