尚硅谷todolist案例

vue todolist案例

1 拆分组件

一共拆分为4个组件

• TodoHeader

• TodoItem

• TodoList

• TodoFooter

item是list的子组件

2 组件化编码流程

1. 实现静态组件：抽取组件，只考虑结构和样式

   先拆结构再拆样式

2. 展示动态数据

使用数组对象来保存数据[{},{},{}]

每一个对象的{

id：

name：

ok：

…

}

谁展示对象，就保存在哪个组件,这里保存在list里面

3 交互-添加一个todo

• 将要添加的todo包装成一个对象

• 需要把header中的todoObj添加到list上

问题：现知识无法实现，因为header和list没有父子关系，是兄弟关系

解决方法（初级）：

• 将todos[]放在app中,通过props去传递

• 在将todo传递给header（子级给父级传）

  • 提前在app里提前准备好methods，设置接收方法receive（）

  • 把receive（）交给header 【app是父亲可以给孩子传函数（方法），数组，字符串，布尔值…都行】

  • 然后在header中使用props接收receive，此时receive出现在header组件的实例vc上，模板就可以直接用

静态数组不能重名–>addTodo 不可以写成add

组件间通信

父亲给儿子传 儿子给父亲传

4 交互-todos勾选

实现勾选操作数据也会发生变化

思路：拿到勾选框的id，再到todos里找到勾选的todo，将done值取反

• 给勾选框绑定change()事件

数据再哪里，对数据的操作就写在哪里

todos在App组件中，所以对todos的增删改查都应写在app组件中

• 在app中写checkTodo(id)方法

  • 此时是app爷爷向item孙子传

• 一步一步逐层传递

<!-- :checked="true" 如果后面属性是true就勾选 -->
      <!-- 如下代码也能实现功能，但不太推荐，因为有点违反原则，修改了props -->
      <input
        type="checkbox"
       v-model="todo.done"
      />

v-model绑定的是布尔值，输入框是checkbox，那么这个布尔值可以确定checkbox勾或者不勾

因为传入的todo是通过props，props只读不可以修改（栈里面的地址没变，变的是堆里面存的数据），vue监测的是引用地址，只要地址不变，就没修改

使用v-model更改数据是藏在对象中改，vue检测不到

所以v-model不建议使用props传入的数据

5 交互-todos删除

• 点击删除按钮，拿到按钮的id

• todos在App中，所以在item中要通知App删除对象

• 在App中写删除方法deleteTodo（）

• 爷传孙，先给list，在list给item

6 交互-todos底部统计

• todos的长度就是全部的数量

• 在遍历todos中done值为真的todo

统计已完成的事项

方法一：遍历

  let i = 0;
      this.todos.forEach((todo) => {
        if (todo.done) i++;
      });
      return i;

方法二：reduce()

 const x = this.todos.reduce((pre, current) => {
        console.log("@", pre, current);
        return pre + (current.done ? 1 : 0);
      }, 0);

 return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0);

7 交互-todos底部统计

• 拿到已完成的事项与总计事项作比较，相等且总数事项>0 ,勾选已完成勾选框

• 一个计算属性可以通过其他计算属性再进行计算

• 当页面没有展示的todos时，隐藏footer，使用v-show='total’判断total的布尔值

• 点击已完成勾选框，事项都勾选，到App中写全选和全不选的方法

红色：初始化展示，绿色：交互

可以使用v-model，使用getter和setter完整的写法

<input type="checkbox" v-model="isAll" />

isAll: {
      //全选框是否勾选
      get() {
        return this.doneTotal === this.total && this.total > 0;
      },
      //isAll被修改时set被调用
      set(value) {
        this.checkAllTodo(value);
      },
    },

• 清除已完成

总结TodoList案例

1. 组件化编码流程：

​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

​ 1).一个组件在用：放在组件自身即可。

​ 2). 一些组件在用：放在他们共同的父组件上（状态提升）。

​ (3).实现交互：从绑定事件开始。

2. props适用于：

​ (1).父组件 ==> 子组件 通信

​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）

3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

实例代码

app.vue

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <todo-header :addTodo="addTodo"></todo-header>
        <todo-list
          :todos="todos"
          :checkTodo="checkTodo"
          :deleteTodo="deleteTodo"
        ></todo-list>
        <todo-footer
          :todos="todos"
          :checkAllTodo="checkAllTodo"
          :clearDoneTodo="clearDoneTodo"
        ></todo-footer>
      </div>
    </div>
  </div>
</template>

<script>
// 引入
import TodoHeader from "./components/TodoHeader.vue";
import TodoList from "./components/TodoList.vue";
import TodoFooter from "./components/TodoFooter.vue";

// 注册
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);
    },
    // 勾选、取消勾选todo
    checkTodo(id) {
      // 拿到todos遍历todo项
      this.todos.forEach((todo) => {
        if (todo.id == id) todo.done = !todo.done;
      });
    },
    // 删除一个todo
    deleteTodo(id) {
      this.todos = this.todos.filter((todo) => todo.id !== id);
    },
    // 全选或者全不选
    checkAllTodo(done) {
      this.todos.forEach((todo) => {
        todo.done = done;
      });
    },
    // 清除所有已完成的todo
    clearDoneTodo() {
      this.todos = this.todos.filter((todo) => {
        return !todo.done;
      });
    },
  },
};
</script>

<style scoped>
/*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>
  

TodoFooter.vue

<template>
  <div class="todo-footer" v-show="total">
    <label>
      <!-- <input type="checkbox" :checked="isAll" @change="checkAll" /> -->
      <!-- 使用v-model -->
      <input type="checkbox" v-model="isAll" />
    </label>
    <span>
      <span>已完成{{ doneTotal }}</span> / 全部{{ total }}
    </span>
    <button class="btn btn-danger" @click="clearDone">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "TodoFooter",
  props: ["todos", "checkAllTodo", "clearDoneTodo"],
  computed: {
    //总数
    total() {
      return this.todos.length;
    },
    //计算已完成数
    doneTotal() {
      // 遍历
      let i = 0;
      this.todos.forEach((todo) => {
        if (todo.done) i++;
      });
      return i;

      //此处使用reduce方法做条件统计
      // 最后一个返回值作为reduce的返回值
      /*  const x = this.todos.reduce((pre, current) => {
        console.log("@", pre, current);
        return pre + (current.done ? 1 : 0);
      }, 0); */

      /*  return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0); */
    },
    /* isAll() {
      // 总数大于零并且相等
      return this.doneTotal === this.total && this.total > 0;
    }, */
    //控制全选框
    isAll: {
      //全选框是否勾选
      get() {
        return this.doneTotal === this.total && this.total > 0;
      },
      //isAll被修改时set被调用
      set(value) {
        this.checkAllTodo(value);
      },
    },
  },
  methods: {
    /*     checkAll(e) {
      this.checkAllTodo(e.target.checked);
    }, */

    //清空所有已完成
    clearDone() {
      this.clearDoneTodo();
    },
  },
};
</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>

TodoHeader.vue

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

<script>
// 引入nanoid生成唯一字符串给id
import { nanoid } from "nanoid";
export default {
  name: "TodoHeader",
  props: ["addTodo"],
  data() {
    return {
      title: "",
    };
  },
  methods: {
    add() {
      // 将用户的输入包装成todo对象
      // 校验数据
      if (!this.title.trim()) return alert("输入不能为空");
      //将用户的输入包装成一个todo对象
      // nanoid() 生成全球唯一字符串
      const todoObj = { id: nanoid(), title: this.title, dnoe: false };
      // 通知App组件去添加ToDO对象
      this.addTodo(todoObj);
      // 成功输入完添加后输入框变为空
      this.title = "";
    },
    // 接受App传过来的参数
  },
};
</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>

TodoItem.vue

<template>
  <li>
    <label>
      <!-- :checked="true" 如果后面属性是true就勾选 -->
      <!-- 如下代码也能实现功能，但不太推荐，因为有点违反原则，修改了props -->
      <input
        type="checkbox"
        :checked="todo.done"
        @change="handleCheck(todo.id)"
      />
      <!-- 展示todo事项的名字 -->
      <span>{{ todo.title }}</span>
    </label>
    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
  </li>
</template>

<script>
export default {
  name: "TodoItem",
  // 声明接收父容器todoList传来的对象
  props: ["todo", "checkTodo", "deleteTodo"],
  methods: {
    // 勾选
    handleCheck(id) {
      // 通知App组件将对应的todo对象值取反
      this.checkTodo(id);
    },
    // 删除
    handleDelete(id) {
      if (confirm("确认删除吗？")) {
        //通知App组件将对应的todo对象删除
        this.deleteTodo(id);
      }
    },
  },
};
</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;
}

li:hover {
  background-color: #ddd;
}
li:hover button {
  display: block;
}
</style>

TodoList.vue

<template>
  <ul class="todo-main">
    <!-- 
      v-for="todoObj in todos" :遍历todos的对象
      :key="todoObj.id" 使用id作为索引变量
       -->
    <todo-item
      v-for="todoObj in todos"
      :key="todoObj.id"
      :todo="todoObj"
      :checkTodo="checkTodo"
      :deleteTodo="deleteTodo"
    ></todo-item>
  </ul>
</template>

<script>
// 引入item
import TodoItem from "./TodoItem.vue";
export default {
  name: "TodoList",
  components: {
    TodoItem,
  },
  //声明接收App传递过来的数据，其中todos是自己用的，checkTodo和deleteTodo是给子组件MyItem用的
  props: ["todos", "checkTodo", "deleteTodo"],
};
</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>