09-Vue技术栈（TodoList案例）

已于 2023-05-06 10:06:56 修改
阅读量915 收藏 6
点赞数 2
分类专栏： Vue.js笔记 综合案例 文章标签： vue.js javascript 前端 前端框架
于 2023-05-06 10:04:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhang_wang_yun/article/details/130498723
版权

目录

实现效果：
请添加图片描述

源码在主页资源，可自行下载

1、前期准备

  1. 先搭建好Vue脚手架

具体步骤

第一步（仅第一次执行）：全局安装@vue/cli

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

注：xxxx是你的项目名称

第三步：启动项目

npm run serve

2、创建好我们的结构目录

在这里插入图片描述

2、组件化编码流程

  • (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
  • (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
    1. 一个组件在用：放在组件自身即可。
    2. 一些组件在用：放在他们共同的父组件上（状态提升）。
  • ​ (3).实现交互：从绑定事件开始。

3、拆分静态组件

我们将整体结构分为一个主组件app和3个子组件TodoHeader,TodoList,TodoFooter,在TodoList中有一个组件TodoItem。
根据组件的功能拆分静态资源
在这里插入图片描述

3.1 app组件

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- 使用组件 -->
        <TodoHeader />
        <TodoList />
        <TodoFooter />
      </div>
    </div>
  </div>
</template>
   
<script>
// 导入子组件
import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";
export default {
    name:'App',
  // 注册组件
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
};
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

3.2 TodoList组件

<template>
  <ul class="todo-main">
    <!-- 使用组件 -->
    <TodoItem/>
  </ul>
</template>

<script>
// 导入组件
import TodoItem from './TodoItem'
export default {
 	name:'TodoList',
    // 注册组件
    components:{
        TodoItem
    }
};
</script>

<style scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>

3.2.1 TodoItem组件

<template>
  <li>
    <label>
      <input type="checkbox" />
      <span>xxxxx</span>
    </label>
    <button class="btn btn-danger" style="display: none">删除</button>
  </li>
</template>

<script>
export default {
    name:'TodoItem'
};
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

</style>

3.3 TodoFooter组件

<template>
   <div class="todo-footer">
        <label>
          <input type="checkbox"/>
        </label>
        <span>
          <span>已完成0</span> / 全部2
        </span>
        <button class="btn btn-danger">清除已完成任务</button>
      </div>
</template>

<script>
export default {
	name:'TodoFooter'

}
</script>

<style scoped>

/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>

4、实现动态组件

我们的数据很多个组件都需要用到，所以我们应该将数据放在最大的App组件里面

 data() {
    return {
      data() {
        return {
          //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
          todos: [
            { id: "001", title: "抽烟", done: true },
            { id: "002", title: "喝酒", done: false },
            { id: "003", title: "开车", done: true },
          ],
        };
      },
    };
  },

5、实现交互

5.1 渲染页面

  • 要实现TodoList组件里面的数据是响应式的，我们就需要将App组件里面的数据发送给它，这个时候我们就需要用到组件间的通信。

  • App组件通过:todos="todos"的props通信方式，将数据传给TodoList组件

     <TodoList :todos="todos" />

  • TodoList组件通过props配置项接收数据

     //接收App传过来的数据
    props:['todos'],

  • TodoList接收到数据后，对子组件进行列表循环，并且每一个对象传给TodoItem子组件，让它渲染里面的具体数据。

     <TodoItem 
    v-for="todoObj in todos"
    :key='todoObj.id'
    :todo='todoObj'
  />

  • TodoItem组件通过props配置项接收数据

     props:['todo']

  • TodoItem接收到数据之后渲染页面

    <template>
  <li>
    <label>
      <input type="checkbox" />
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" style="display: none">删除</button>
  </li>
</template>

5.2 添加功能

  • 实现添加功能我们就需要对TodoHeader组件进行设置，将数据发送给App组件。

  • 由于是子组件 ===> 父组件传递数据，所以我将使用组件的自定义事件完成这个功能

App组件

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- 使用组件 -->
        <TodoHeader @addTodo='addTodo'/>
        <TodoList :todos="todos" />
        <TodoFooter />
      </div>
    </div>
  </div>
</template>
   
<script>
// 导入子组件
import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";
export default {
  name: "App",
  // 注册组件
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
  data() {
    return {
      //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
      todos: [
        { id: "001", title: "抽烟", done: true },
        { id: "002", title: "喝酒", done: false },
        { id: "003", title: "开车", done: true },
      ],
    };
  },
  methods: {
    // 添加一个todo 
    addTodo(todoObj) {
        this.todos.unshift(todoObj)
    }
  },

};
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

TodoHeader组件

<template>
  <div class="todo-header">
    <input
      type="text"
      placeholder="请输入你的任务名称，按回车键确认"
      v-model="title"
      @keyup.enter="add"
    />
  </div>
</template>

<script>
// 导入nanoid包，这个包采用的是分别暴露的方式
import { nanoid } from "nanoid";
export default {
  name: "TodoHeader",
  data() {
    return {
      // 用于接收用户输入的数据
      title: "",
    };
  },
  methods: {
    add() {
      // 如果用户输入为空就终止下面语句
      if (!this.title.trim()) return alert("内容不能为空");
      // 将用户输入的数据包装成一个对象
      const todoObj = { id: nanoid(), title: this.title, done: false };
      this.$emit("addTodo", todoObj);
      //   添加完清空输入框里的数据
      this.title = "";
    },
  },
};
</script>

<style scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

5.3 勾选or取消勾选一个todo

  • 这个功能我们需要根据每一个todo的复选框的状态来修改数据里面的done值
  • 由于这个功能的通信是孙子==>爷爷（TodoItem==>App)，所以我们采用全局事件总线的方式来完成通信。

main文件安装全局事件总线

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this//安装全局事件总线
  }
}).$mount('#app')

App组件作为接收数据放，所以App组件想接收数据，则在App组件中给$bus绑定自定义事件，事件的回调留在App组件自身。

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- 使用组件 -->
        <TodoHeader @addTodo="addTodo" />
        <TodoList :todos="todos" />
        <TodoFooter />
      </div>
    </div>
  </div>
</template>
   
<script>
// 导入子组件
import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";
export default {
  name: "App",
  // 注册组件
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
  data() {
    return {
      //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
      todos: [
        { id: "001", title: "抽烟", done: true },
        { id: "002", title: "喝酒", done: false },
        { id: "003", title: "开车", done: true },
      ],
    };
  },
  methods: {
    // 添加一个todo
    addTodo(todoObj) {
      this.todos.unshift(todoObj);
    },
    // 勾选or取消勾选一个todo
    checkTodo(id) {
      this.todos.forEach((item) => {
        if (item.id === id) item.done = !item.done;
      });
    },
  },
  // 全局事件总线通信方式
  mounted() {
    this.$bus.$on("checkTodo", this.checkTodo);
  },
  beforeDestroy() {
    this.$bus.$off("checkTodo");
  },
};
</script>

TodoItem组件作为提供数据者：需要调用这个事件this.$bus.$emit('xxxx',数据)

<template>
  <li>
    <label>
      <input type="checkbox" :checked='todo.done' @change='handelCheck(todo.id)'/>
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" style="display: none">删除</button>
  </li>
</template>

<script>
export default {
    name:'TodoItem',
    // 接收TodoList传过来的数据
    props:['todo'],
    methods: {
      handelCheck(id) {
       this.$bus.$emit('checkTodo',id)
      }
    },
};
</script>

5.4 删除一个todo

  • 同样采用事件总线的通信方式

App组件

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- 使用组件 -->
        <TodoHeader @addTodo="addTodo" />
        <TodoList :todos="todos" />
        <TodoFooter />
      </div>
    </div>
  </div>
</template>
   
<script>
// 导入子组件
import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";
export default {
  name: "App",
  // 注册组件
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
  data() {
    return {
      //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
      todos: [
        { id: "001", title: "抽烟", done: true },
        { id: "002", title: "喝酒", done: false },
        { id: "003", title: "开车", done: true },
      ],
    };
  },
  methods: {
    // 添加一个todo
    addTodo(todoObj) {
      this.todos.unshift(todoObj);
    },
    // 勾选or取消勾选一个todo
    checkTodo(id) {
      this.todos.forEach((item) => {
        if (item.id === id) item.done = !item.done;
      });
    },
    // 删除一个todo
    DeleteTodo(id) {
      this.todos = this.todos.filter((item) => {
        return item.id != id;
      });
    },
  },
  // 全局事件总线通信方式
  mounted() {
    this.$bus.$on("checkTodo", this.checkTodo);
    this.$bus.$on("DeleteTodo", this.DeleteTodo);
  },
  beforeDestroy() {
    this.$bus.$off("checkTodo");
  },
};
</script>

TodoItem组件

<template>
  <li>
    <label>
      <input
        type="checkbox"
        :checked="todo.done"
        @change="handelCheck(todo.id)"
      />
      <span>{{ todo.title }}</span>
    </label>
    <button class="btn btn-danger" @click="handelDelete(todo.id)">删除</button>
  </li>
</template>

<script>
export default {
  name: "TodoItem",
  // 接收TodoList传过来的数据
  props: ["todo"],
  methods: {
    handelCheck(id) {
      this.$bus.$emit("checkTodo", id);
    },
    handelDelete(id) {
     if(confirm('确定要删除吗？')) this.$bus.$emit("DeleteTodo", id);
    },
  },
};
</script>

5.5 渲染TodoFooter底部内容

  • 我们需要将数据todos发送给TodoFooter组件，这里采用最简单的props通信方式。

App组件

 <TodoFooter :todos="todos"/>

TodoFooter组件

<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" />
    </label>
    <span>
      <span>{{ doneTotal }}</span> / {{ total }}
    </span>
    <button class="btn btn-danger">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "TodoFooter",
  props: ["todos"],
  computed: {
    // 总的todo
    total() {
      return this.todos.length;
    },
    // 已完成todo
    doneTotal() {
      return this.todos.reduce((pre, current) => pre + (current.done ? 1 : 0),0);
    },
  },
};
</script>

5.6 全选or取消全选

  • 由于我们是子组件==>父组件进行通信(TodoFooter==>App)，所以我们采用组件自定义事件来完成组件之间的通信

App组件：

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- 使用组件 -->
        <TodoHeader @addTodo="addTodo" />
        <TodoList :todos="todos" />
        <TodoFooter :todos="todos" @checkAllTodo='checkAllTodo'/>
      </div>
    </div>
  </div>
</template>
   
<script>
// 导入子组件
import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";
export default {
  name: "App",
  // 注册组件
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
  data() {
    return {
      //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
      todos: [
        { id: "001", title: "抽烟", done: true },
        { id: "002", title: "喝酒", done: false },
        { id: "003", title: "开车", done: true },
      ],
    };
  },
  methods: {
    // 添加一个todo
    addTodo(todoObj) {
      this.todos.unshift(todoObj);
    },
    // 勾选or取消勾选一个todo
    checkTodo(id) {
      this.todos.forEach((item) => {
        if (item.id === id) item.done = !item.done;
      });
    },
    // 删除一个todo
    DeleteTodo(id) {
      this.todos = this.todos.filter((item) => {
        return item.id != id;
      });
    },
    // 全选或全不选
    checkAllTodo(value) {
      this.todos.forEach(item=>item.done = value)
    }
  },
  // 全局事件总线通信方式
  mounted() {
    this.$bus.$on("checkTodo", this.checkTodo);
    this.$bus.$on("DeleteTodo", this.DeleteTodo);
  },
  beforeDestroy() {
    this.$bus.$off("checkTodo");
  },
};
</script>

TodoFooter组件

<template>
  <div class="todo-footer" v-if ='total'>
    <label>
      <input type="checkbox" v-model="isAll" />
    </label>
    <span>
      <span>{{ doneTotal }}</span> / {{ total }}
    </span>
    <button class="btn btn-danger">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "TodoFooter",
  props: ["todos"],
  computed: {
    // 总的todo
    total() {
      return this.todos.length;
    },
    // 已完成todo
    doneTotal() {
      return this.todos.reduce((pre, current) => pre + (current.done ? 1 : 0),0);
    },
    // 全选或全不选
    isAll:{
      get() {
        return this.doneTotal === this.total && this.total > 0
      },
      set(value){
        this.$emit('checkAllTodo',value)
      }
    } 
  },
};
</script>

5.7清除所有已经完成的todo

  • 由于我们还是子组件==>父组件进行通信(TodoFooter==>App)，所以我们采用组件自定义事件来完成组件之间的通信

App组件

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- 使用组件 -->
        <TodoHeader @addTodo="addTodo" />
        <TodoList :todos="todos" />
        <TodoFooter
          :todos="todos"
          @checkAllTodo="checkAllTodo"
          @clearAllTodo="clearAllTodo"
        />
      </div>
    </div>
  </div>
</template>
   
<script>
// 导入子组件
import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";
export default {
  name: "App",
  // 注册组件
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
  data() {
    return {
      //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
      todos: [
        { id: "001", title: "抽烟", done: true },
        { id: "002", title: "喝酒", done: false },
        { id: "003", title: "开车", done: true },
      ],
    };
  },
  methods: {
    // 添加一个todo
    addTodo(todoObj) {
      this.todos.unshift(todoObj);
    },
    // 勾选or取消勾选一个todo
    checkTodo(id) {
      this.todos.forEach((item) => {
        if (item.id === id) item.done = !item.done;
      });
    },
    // 删除一个todo
    DeleteTodo(id) {
      this.todos = this.todos.filter((item) => {
        return item.id != id;
      });
    },
    // 全选或全不选
    checkAllTodo(value) {
      this.todos.forEach((item) => (item.done = value));
    },
    // 清除所有已完成的todo
    clearAllTodo() {
      this.todos = this.todos.filter((item) => !item.done);
    },
  },
  // 全局事件总线通信方式
  mounted() {
    this.$bus.$on("checkTodo", this.checkTodo);
    this.$bus.$on("DeleteTodo", this.DeleteTodo);
  },
  beforeDestroy() {
    this.$bus.$off("checkTodo");
  },
};
</script>

TodoFooter组件

<template>
  <div class="todo-footer" v-if ='total'>
    <label>
      <input type="checkbox" v-model="isAll" />
    </label>
    <span>
      <span>{{ doneTotal }}</span> / {{ total }}
    </span>
    <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "TodoFooter",
  props: ["todos"],
  computed: {
    // 总的todo
    total() {
      return this.todos.length;
    },
    // 已完成todo
    doneTotal() {
      return this.todos.reduce((pre, current) => pre + (current.done ? 1 : 0),0);
    },
    // 全选或全不选
    isAll:{
      get() {
        return this.doneTotal === this.total && this.total > 0
      },
      set(value){
        this.$emit('checkAllTodo',value)
      }
    },
  },
  methods: {
    // 清除所有已完成todo
    clearAll() {
      this.$emit('clearAllTodo')
    }
  },
};
</script>

5.8 改为本地存储版

  • 要实现页面刷新内容不丢失这个功能，我们就需要用到localStorage 属性来实现本地存储机制。同时需要用到watch属性来检测数据。

相关API：

  1. xxxxxStorage.setItem('key', 'value');
    该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

  2. xxxxxStorage.getItem('person');

    ​ 该方法接受一个键名作为参数，返回键名对应的值。

  3. xxxxxStorage.removeItem('key');

    ​ 该方法接受一个键名作为参数，并把该键名从存储中删除。

  4. xxxxxStorage.clear()

    ​ 该方法会清空存储中的所有数据。

App组件

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- 使用组件 -->
        <TodoHeader @addTodo="addTodo" />
        <TodoList :todos="todos" />
        <TodoFooter
          :todos="todos"
          @checkAllTodo="checkAllTodo"
          @clearAllTodo="clearAllTodo"
        />
      </div>
    </div>
  </div>
</template>
   
<script>
// 导入子组件
import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";
export default {
  name: "App",
  // 注册组件
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
  data() {
    return {
      //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
      todos: JSON.parse(localStorage.getItem('todos'))|| []
    };
  },
  methods: {
    // 添加一个todo
    addTodo(todoObj) {
      this.todos.unshift(todoObj);
    },
    // 勾选or取消勾选一个todo
    checkTodo(id) {
      this.todos.forEach((item) => {
        if (item.id === id) item.done = !item.done;
      });
    },
    // 删除一个todo
    DeleteTodo(id) {
      this.todos = this.todos.filter((item) => {
        return item.id != id;
      });
    },
    // 全选或全不选
    checkAllTodo(value) {
      this.todos.forEach((item) => (item.done = value));
    },
    // 清除所有已完成的todo
    clearAllTodo() {
      this.todos = this.todos.filter((item) => !item.done);
    },
  },
  watch:{
    todos:{
      handler(value) {
        localStorage.setItem('todos',JSON.stringify(value))
      }
    }
  },
  // 全局事件总线通信方式
  mounted() {
    this.$bus.$on("checkTodo", this.checkTodo);
    this.$bus.$on("DeleteTodo", this.DeleteTodo);
  },
  beforeDestroy() {
    this.$bus.$off("checkTodo");
  },
};
</script>

5.9 编辑数据

这个功能我们需要根据每一个todo的id和title的值来修改数据里面的titel值
由于这个功能的通信是孙子==>爷爷（TodoItem==>App)，所以我们采用全局事件总线的方式来完成通信。

App组件

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- 使用组件 -->
        <TodoHeader @addTodo="addTodo" />
        <TodoList :todos="todos" />
        <TodoFooter
          :todos="todos"
          @checkAllTodo="checkAllTodo"
          @clearAllTodo="clearAllTodo"
        />
      </div>
    </div>
  </div>
</template>
   
<script>
// 导入子组件
import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";
export default {
  name: "App",
  // 注册组件
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
  data() {
    return {
      //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
      todos: JSON.parse(localStorage.getItem("todos")),
    };
  },
  methods: {
    // 添加一个todo
    addTodo(todoObj) {
      this.todos.unshift(todoObj);
    },
    // 勾选or取消勾选一个todo
    checkTodo(id) {
      this.todos.forEach((item) => {
        if (item.id === id) item.done = !item.done;
      });
    },
    // 删除一个todo
    DeleteTodo(id) {
      this.todos = this.todos.filter((item) => {
        return item.id != id;
      });
    },
    // 全选或全不选
    checkAllTodo(value) {
      this.todos.forEach((item) => (item.done = value));
    },
    // 清除所有已完成的todo
    clearAllTodo() {
      this.todos = this.todos.filter((item) => !item.done);
    },
    // 更新一个todo
    updateTodo(id, value) {
      this.todos.forEach((item) => {
        if (item.id === id) item.title = value;
      });
    },
  },
  watch: {
    todos: {
      deep: true,
      handler(value) {
        localStorage.setItem("todos", JSON.stringify(value));
      },
    },
  },
  // 全局事件总线通信方式
  mounted() {
    this.$bus.$on("checkTodo", this.checkTodo);
    this.$bus.$on("DeleteTodo", this.DeleteTodo);
    this.$bus.$on("updateTodo", this.updateTodo);
  },
  beforeDestroy() {
    this.$bus.$off("checkTodo");
    this.$bus.$off("updateTodo");
  },
};
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}
.btn-edit {
  color: #fff;
  background-color: #8ed2f1;
  border: 1px solid #419ce7;
  margin-right: 5px;
}
.btn-edit:hover {
  color: #fff;
  background-color: #3ab3eb;
  border: 1px solid #419ce7;
  margin-right: 5px;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

TodoItem组件

<template>
  <li>
    <label>
      <input
        type="checkbox"
        :checked="todo.done"
        @change="handelCheck(todo.id)"
      />
      <span v-show="!todo.isEdit">{{ todo.title }}</span>
      <input 
      type="text" 
      :value="todo.title"
      v-show="todo.isEdit"
      ref="inputFocus"
      @blur="handleBlur(todo,$event)"
       >
    </label>
    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    <button class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
  </li>
</template>

<script>
export default {
  name: "TodoItem",
  // 接收TodoList传过来的数据
  props: ["todo"],
  methods: {
    handelCheck(id) {
      this.$bus.$emit("checkTodo", id);
    },
    handleDelete(id) {
     if(confirm('确定要删除吗？')) this.$bus.$emit("DeleteTodo", id);
    },
    handleEdit(todo) {
      if(todo.hasOwnProperty('isEdit')) {
        todo.isEdit = true
      } else {
        this.$set(todo,'isEdit',true)
      }
      this.$nextTick(function() {
        this.$refs.inputFocus.focus()
      })
    },
    handleBlur(todo,e){
				todo.isEdit = false
				if(!e.target.value.trim()) return alert('输入不能为空！')
				this.$bus.$emit('updateTodo',todo.id,e.target.value)
			}
  },
};
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}
li:hover button {
  display: block;
}
li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
</style>

5.10 添加一个动画

  • 给TodoItem组件添加一个动画

代码示例：

<template>
  <transition name="animation1" appear>
  <li>
    <label>
      <input
        type="checkbox"
        :checked="todo.done"
        @change="handleCheck(todo.id)"
      />
      <span v-show="!todo.isEdit">{{ todo.title }}</span>
      <input
        type="text"
        :value="todo.title"
        v-show="todo.isEdit"
        @blur="handleBlur(todo, $event)"
        ref="inputTitle"
      />
    </label>
    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    <button
      v-show="!todo.isEdit"
      class="btn btn-edit"
      @click="handleEdit(todo)"
    >
      编辑
    </button>
  </li>
  </transition>
</template>

<script>
export default {
  props: ["todo"],
  methods: {
    // 勾选or不勾选todo
    handleCheck(id) {
      // this.CheckTodo(id);
      this.$bus.$emit("CheckTodo", id);
    },
    // 删除一个todo
    handleDelete(id) {
      if (confirm("确定要删除吗？")) {
        // this.DeleteTodo(id)
        this.$bus.$emit("DeleteTodo", id);
      }
    },
    //编辑
    handleEdit(todo) {
     if(todo.hasOwnProperty('isEdit')){
					todo.isEdit = true
				}else{
					this.$set(todo,'isEdit',true)
				}
				this.$nextTick(function(){
					this.$refs.inputTitle.focus()
				})
    },
    // 失去焦点
    handleBlur(todo, e) {
      todo.isEdit = false;
      if (!e.target.value.trim()) return alert("输入不能为空！");
      this.$bus.$emit("updateTodo", todo.id, e.target.value);
    },
  },
};
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}
li:hover {
  background: #ddd;
}
li:hover button {
  display: block;
}
li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
/* 进入过程中 */
.animation1-enter-active {
	animation: animations 0.5s linear;
}
/* 离开过程中 */
.animation1-leave-active {
	animation: animations 0.5s linear reverse;
}
@keyframes animations {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
</style>

6、完整代码

main文件

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this//安装全局事件总线
  }
}).$mount('#app')

App组件

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- 使用组件 -->
        <TodoHeader @addTodo="addTodo" />
        <TodoList :todos="todos" />
        <TodoFooter
          :todos="todos"
          @checkAllTodo="checkAllTodo"
          @clearAllTodo="clearAllTodo"
        />
      </div>
    </div>
  </div>
</template>
   
<script>
// 导入子组件
import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";
export default {
  name: "App",
  // 注册组件
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
  data() {
    return {
      //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
      todos: JSON.parse(localStorage.getItem("todos")),
    };
  },
  methods: {
    // 添加一个todo
    addTodo(todoObj) {
      this.todos.unshift(todoObj);
    },
    // 勾选or取消勾选一个todo
    checkTodo(id) {
      this.todos.forEach((item) => {
        if (item.id === id) item.done = !item.done;
      });
    },
    // 删除一个todo
    DeleteTodo(id) {
      this.todos = this.todos.filter((item) => {
        return item.id != id;
      });
    },
    // 全选或全不选
    checkAllTodo(value) {
      this.todos.forEach((item) => (item.done = value));
    },
    // 清除所有已完成的todo
    clearAllTodo() {
      this.todos = this.todos.filter((item) => !item.done);
    },
    // 更新一个todo
    updateTodo(id, value) {
      this.todos.forEach((item) => {
        if (item.id === id) item.title = value;
      });
    },
  },
  watch: {
    todos: {
      deep: true,
      handler(value) {
        localStorage.setItem("todos", JSON.stringify(value));
      },
    },
  },
  // 全局事件总线通信方式
  mounted() {
    this.$bus.$on("checkTodo", this.checkTodo);
    this.$bus.$on("DeleteTodo", this.DeleteTodo);
    this.$bus.$on("updateTodo", this.updateTodo);
  },
  beforeDestroy() {
    this.$bus.$off("checkTodo");
    this.$bus.$off("updateTodo");
  },
};
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}
.btn-edit {
  color: #fff;
  background-color: #8ed2f1;
  border: 1px solid #419ce7;
  margin-right: 5px;
}
.btn-edit:hover {
  color: #fff;
  background-color: #3ab3eb;
  border: 1px solid #419ce7;
  margin-right: 5px;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

TodoHeader组件

<template>
  <div class="todo-header">
    <input
      type="text"
      placeholder="请输入你的任务名称，按回车键确认"
      v-model="title"
      @keyup.enter="add"
    />
  </div>
</template>

<script>
// 导入nanoid包，这个包采用的是分别暴露的方式
import { nanoid } from "nanoid";
export default {
  name: "TodoHeader",
  data() {
    return {
      // 用于接收用户输入的数据
      title: "",
    };
  },
  methods: {
    add() {
      // 如果用户输入为空就终止下面语句
      if (!this.title.trim()) return alert("内容不能为空");
      // 将用户输入的数据包装成一个对象
      const todoObj = { id: nanoid(), title: this.title, done: false };
      this.$emit("addTodo", todoObj);
      //   添加完清空输入框里的数据
      this.title = "";
    },
  },
};
</script>

<style scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

TodoList组件

<template>
  <ul class="todo-main">
    <!-- 使用组件 -->
    <TodoItem 
    v-for="todoObj in todos"
    :key='todoObj.id'
    :todo='todoObj'
    />
  </ul>
</template>
<script>
// 导入组件
import TodoItem from './TodoItem'
export default {
    name:'TodoList',
    //接收App传过来的数据
    props:['todos'],
    // 注册组件
    components:{
        TodoItem
    },
};
</script>

<style scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>

TodoFooter组件

<template>
  <div class="todo-footer" v-if ='total'>
    <label>
      <input type="checkbox" v-model="isAll" />
    </label>
    <span>
      <span>{{ doneTotal }}</span> / {{ total }}
    </span>
    <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "TodoFooter",
  props: ["todos"],
  computed: {
    // 总的todo
    total() {
      return this.todos.length;
    },
    // 已完成todo
    doneTotal() {
      return this.todos.reduce((pre, current) => pre + (current.done ? 1 : 0),0);
    },
    // 全选或全不选
    isAll:{
      get() {
        return this.doneTotal === this.total && this.total > 0
      },
      set(value){
        this.$emit('checkAllTodo',value)
      }
    },
  },
  methods: {
    // 清除所有已完成todo
    clearAll() {
      if(confirm('确定要删除已经完成的事项吗？'))this.$emit('clearAllTodo')
    }
  },
};
</script>

<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>

TodoItem组件

<template>
  <transition name="animation1" appear>
  <li>
    <label>
      <input
        type="checkbox"
        :checked="todo.done"
        @change="handleCheck(todo.id)"
      />
      <span v-show="!todo.isEdit">{{ todo.title }}</span>
      <input
        type="text"
        :value="todo.title"
        v-show="todo.isEdit"
        @blur="handleBlur(todo, $event)"
        ref="inputTitle"
      />
    </label>
    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    <button
      v-show="!todo.isEdit"
      class="btn btn-edit"
      @click="handleEdit(todo)"
    >
      编辑
    </button>
  </li>
  </transition>
</template>

<script>
export default {
  props: ["todo"],
  methods: {
    // 勾选or不勾选todo
    handleCheck(id) {
      // this.CheckTodo(id);
      this.$bus.$emit("CheckTodo", id);
    },
    // 删除一个todo
    handleDelete(id) {
      if (confirm("确定要删除吗？")) {
        // this.DeleteTodo(id)
        this.$bus.$emit("DeleteTodo", id);
      }
    },
    //编辑
    handleEdit(todo) {
     if(todo.hasOwnProperty('isEdit')){
					todo.isEdit = true
				}else{
					this.$set(todo,'isEdit',true)
				}
				this.$nextTick(function(){
					this.$refs.inputTitle.focus()
				})
    },
    // 失去焦点
    handleBlur(todo, e) {
      todo.isEdit = false;
      if (!e.target.value.trim()) return alert("输入不能为空！");
      this.$bus.$emit("updateTodo", todo.id, e.target.value);
    },
  },
};
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}
li:hover {
  background: #ddd;
}
li:hover button {
  display: block;
}
li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
/* 进入过程中 */
.animation1-enter-active {
	animation: animations 0.5s linear;
}
/* 离开过程中 */
.animation1-leave-active {
	animation: animations 0.5s linear reverse;
}
@keyframes animations {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
</style>
东方青云、
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
6. toDoList案例
s12345672的博客
10-22 940
toDoList.js $(function () { load(); // 1. 按下回车键，把完整数据存储到本地存储里面 // 存储数据的格式：var todolist = [{title:"xxx",done:false}] $("#title").on("keydown", function (event) { // 判断用户是否按下的是回车键 if (event.keyCode === 13) { ...
ToDo案例.html
08-09
最近学习了一个JQuery实战案例：todolist。主要是对localStorage本地存储数据的增、删、改、查操作与页面的渲染。综合性很强。 现在把这个案例作为笔记放在网络上，就算忘记了，也可以随时联网打开，把源码复制过来，根据需求更改使用。有需要的朋友也可以参考一下哦。而且增加了一些小功能，对内容的动态修改。
ToDolist案例源码
江咏之
06-03 1040
vue中的ToDolist案例 下面展示一些 内联代码片。 TodoList案例参考效果：https://blog.csdn.net/p445098355/article/details/106521571 <template> <div id="app"> <nav> <p>TODOlist</p> <input type="text" placeholder="添加ToDo" v-model="va
黑马TOdolist案例（最新版）
qq_45596827的博客
11-24 481
【代码】黑马TOdolist案例（最新版）
Vue - Todos 案例
weixin_62897746的博客
10-27 1227
vue 实现 todos 具体代码思路和代码 给 input 框绑定回车事件，回车后把数据请求到 vuex 中 把数据保存至本地存储中 给下拉箭头绑定点击事件，点击则给所有多选框进行反选 判断是否选中，如果选中则禁用 给数组进行过滤，然后渲染至页面中 双击 input 框 则允许改变样式，平时则禁止改变
vue - Vue脚手架-TodoList案例.doc
07-09
本文档主要介绍了使用 Vue 脚手架实现 TodoList 案例的步骤和关键技术点。该案例旨在帮助开发者熟悉 Vue 组件化编码流程，并掌握 Vue 的一些重要方法。 一、 TodoList 案例的主要步骤 1. 实现静态组件 在实现 ...
使用vue-cli构建的todolist
05-08
使用vue-cli构建的todolist，其中使用了scss，flexible。实现了添加任务，删除任务等小功能
vue-todolist案例
03-08
vue款框架简单的记事本案例
vue3+ts入门（todolist案例）
02-10
vue3+ts入门（todolist案例）
vue-todolist:Vue-todolist
03-13
待办事项清单 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 待办事项清单 请参阅 。
todolist--任务管理软件
05-06
todolist最新版下载。 专业的任务管理软件。 比project好使。
toDoList：ToDoList（HTML，CSS，JS）
02-21
待办事项清单 TodoList的（HTML，CSS，JS）请在这里- 超级简单的待办事项清单，可让您添加，编辑或删除“待办事项”。 受启发
todo小工具（vue）
05-23
vue2.0组件开发模式 + webpack打包工具制作的todo便签
vue——todo案例
weixin_45998300的博客
03-23 1177
javascript:let btn = document.querySelector('.buy-button') setInterval(function() { btn.addEventListener('click', function() { }) console.log('点击成功'); }, 100)
基于jquery开发的todolist待办事列表清单项目
Bofu
07-31 591
目录前提：一、项目介绍：二、todolist项目分析三、todolist核心功能实现四、完整的jquery代码：五、注意事项六、代码仓库七、参考资料： 前提： 这里只介绍jquery所实现的操作部分，页面的html和css部分这里就不在详细介绍，需要看源码的伙伴可以到底部中的项目仓库链接中获取。 一、项目介绍： 文本框里面输入内容，按下回车，就可以生成待办事项。 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。 但是本页面内容刷新页面不
vue.js 入门案例 my todos
Agrass
12-12 2250
学习笔记。 <html> <head> <title>project</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> </head> <body> <nav class="navbar navbar-default navbar-static-"> <div class="container" id
使用Vue实现todos（Vue CLI和VueX）
weixin_41105030的博客
04-27 2492
Vue CLI Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 # 全局安装脚手架 cnpm install -g @vue/cli # 快速创建一个项目 vue create todos # 打开项目 cd todos # 运行项目 cnpm run serve --open VueX Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理...
vue 小练习之 todos(土豆丝)
WjiaoJ的学习
06-03 739
第二天 TODOMVC 一 : 准备工作 vue-TodoMVC 演示效果 : 当前任务:敲代码、视频、游戏 下载模板地址 git clone https://github.com/tastejs/todomvc-app-template.git 安装依赖包 : npm i 二 : 配置 vue 安装 vue : npm i...
Vuejs学习(一)简要的TODOList
那些年写过的代码
05-26 9586
vuejs实现简单的TODOList逻辑
vue-cesium 技术栈
最新发布
05-01
Vue-Cesium技术栈是一种基于Vue.js和Cesium.js的开发框架。它融合了Web端和三维可视化技术，提供了一个强大的前端开发工具，可用于构建各种具有三维地图交互功能的Web应用程序。 Vue-Cesium技术栈的核心是Cesium.js...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东方青云、

你的鼓励将是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值