Vue3.0实现todoList案例-CSDN博客

本文链接：https://blog.csdn.net/jal517486222/article/details/108689570

本文详细介绍了如何使用Vue3.0实现一个功能完善的TodoList应用，包括添加、删除、编辑待办事项，切换待办状态，以及利用自定义指令实现编辑文本框获取焦点。此外，还涉及到本地存储功能的实现，确保数据持久化。

摘要由CSDN通过智能技术生成

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>