Vue3.0实现todolist案例
文章内容输出来源:大前端高薪训练营
代码地址:
https://gitee.com/jiailing/lagou-fed/tree/master/fed-e-task-03-05/code/04-todolist
1. ToDoList功能列表
- 添加待办事项
- 删除待办事项
- 编辑待办事项
- 切换待办事项
- 存储待办事项
2. 项目结构
使用vue脚手架创建Vue项目,先升级vue-cli,4.5.6版本的vue-cli创建项目时可以选择vue版本。
Vue CLI 的包名称由 vue-cli
改成了 @vue/cli
。 如果已经全局安装了旧版本的 vue-cli
(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g
或 yarn global remove vue-cli
卸载它
可以使用下列任一命令安装这个新的包:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
先使用vue create创建项目,创建的时候选择3.0。
vue create 04-todolist
然后选择Default (Vue 3 Preview) ([Vue 3] babel, eslint)
就会自动创建项目了。
3. 添加待办事项
在输入框输入文本按下enter键提交待办事项
// 1. 添加待办事项
const useAdd = todos => {
const input = ref('')
const addTodo = () => {
const text = input.value?.trim()
if (text.length === 0) return
todos.value.unshift({
text,
completed: false
})
input.value = ''
}
return {
input,
addTodo
}
}
4. 删除待办事项
点击待办事项右侧的叉号可以删除待办事项
// 2. 删除待办事项
const useRemove = todos => {
const remove = todo => {
const index = todos.value.indexOf(todo)
todos.value.splice(index, 1)
}
return {
remove
}
}
5. 编辑待办事项
双击进入编辑状态,按esc退出编辑,按enter提交编辑,如果删光了文本,则为删除这一项。
- 双击待办事项,展示编辑文本框
- 按回车或者编辑文本框失去焦点,修改数据
- 按esc取消编辑
- 把编辑文本框清空按回车,删除这一项
- 显示编辑文本框的时候获取焦点
// 3. 编辑待办事项
const useEdit = (remove) => {
let beforeEditingText = ''
const editingTodo = ref(null)
const editTodo = todo => {
beforeEditingText = todo.text
editingTodo.value = todo
}
const doneEdit = todo => {
if (!editingTodo.value) return
todo.text = todo.text.trim()
if (todo.text === '') remove(todo)
editingTodo.value = null
}
const cancelEdit = todo => {
editingTodo.value = null
todo.text = beforeEditingText
}
return {
editingTodo,
editTodo,
doneEdit,
cancelEdit
}
}
模板中:
<ul class="todo-list">
<li v-for="todo in todos" :key="todo" :class="{editing: todo === editingTodo}">
<div class="view">
<input type="checkbox" class="toggle">
<label @dblclick="editTodo(todo)">{
{ todo.text }}</label>
<button class="destroy" @click="remove(todo)"></button>
</div>
<input type="text" class="edit" v-model="todo.text" @keyup.enter="doneEdit(todo)" @blur="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
</li>
</ul>