Vue TodoList案例

asdsa
194 阅读2分钟

完成静态页面

src/components/MyFooter.vue

<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: "MyFooter",
};
</script>

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

src/components/MyHeader.vue

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" />
  </div>
</template>

<script>
export default {
  name: "MyHeader",
};
</script>

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

src/components/MyItem.vue

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

<script>
export default {
  name: "MyItem",
};
</script>

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

src/components/MyList.vue

<template>
  <ul class="todo-main">
    <MyItem />
    <MyItem />
    <MyItem />
    <MyItem />
  </ul>
</template>

<script>
import MyItem from "./MyItem.vue";
export default {
  name: "MyList",
  components: { MyItem },
};
</script>

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

src/App.vue

<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <MyHeader />
      <MyList />
      <MyFooter />
    </div>
  </div>
</template>

<script>
import MyFooter from "./components/MyFooter.vue";
import MyHeader from "./components/MyHeader.vue";
import MyList from "./components/MyList.vue";

export default {
  name: "App",
  components: { MyFooter, MyList, MyHeader },
};
</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>

src/main.js

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#root')

初始化列表

  1. 首先要确定数据结构，列表有多个且有序，显然用数组。数组中每个元素是对象，对象包含了每件事情的属性。暂时先把数据存储在MyList组件里。v-for生成多个MyItem，记得加key。Mylist.vue
<script>
import MyItem from "./MyItem.vue";
export default {
  name: "MyList",
  data() {
    return {
      todos: [
        { id: "001", name: "Eat", done: true },
        { id: "002", name: "Sleep", done: true },
        { id: "003", name: "Play", done: false },
      ],
    };
  },
  components: { MyItem },
};
</script>
  1. 用props，从MyList中获取数据。MyItem.vue
<template>
  <li>
    <label>
      <input type="checkbox" :checked="todo.done" />
      <span>{{ todo.name }}</span>
    </label>
    <button class="btn btn-danger" style="display: none">删除</button>
  </li>
</template>

<script>
export default {
  name: "MyItem",
  props: ["todo"],
};
</script>

实现添加事情功能

  1. MyHeader.vue 中，存储title，和输入框里的内容双向绑定。@keyup.enter是指回车键弹起触发。这个组件接收父组件App传来的方法，进而修改父组件App的数据。父组件数据被修改后，Vue数据监测会触发视图更新。
<template>
  <div class="todo-header">
    <input
      type="text"
      placeholder="请输入你的任务名称，按回车键确认"
      v-model="title"
      @keyup.enter="add"
    />
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "MyHeader",
  data() {
    return {
      title: "",
    };
  },
  methods: {
    add() {
      // 没有内容就不添加
      if (!this.title.trim()) return;
      // 根据输入的内容,生成todo对象
      const todoObj = { id: nanoid(), name: this.title, done: false };
      // 更改父组件App中存储的数据
      this.addTodo(todoObj);
      // 清空输入框(双向绑定)
      this.title = "";
    },
  },
  props: ["addTodo"],
};
</script>
  1. MyList.vue
<template>
  <ul class="todo-main">
    <MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" />
  </ul>
</template>

<script>
import MyItem from "./MyItem.vue";
export default {
  name: "MyList",
  props: ["todos"],
  components: { MyItem },
};
</script>
  1. App.vue 中，之所以把数MyList的数据转移到这里，是因为暂时只学过props，兄弟组件之间不好直接传值，所以统一交给最上层组件管理。
<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <MyHeader :addTodo="addTodo" />
      <MyList :todos="todos" />
      <MyFooter />
    </div>
  </div>
</template>

<script>
import MyFooter from "./components/MyFooter.vue";
import MyHeader from "./components/MyHeader.vue";
import MyList from "./components/MyList.vue";

export default {
  name: "App",
  data() {
    return {
      todos: [
        { id: "001", name: "Eat", done: true },
        { id: "002", name: "Sleep", done: true },
        { id: "003", name: "Play", done: false },
      ],
    };
  },
  methods: {
    addTodo(todoObj) {
      this.todos.unshift(todoObj);
    },
  },
  components: { MyFooter, MyList, MyHeader },
};
</script>

实现勾选功能

  1. MyItem.vue 中，:checked="todo.done"和@change="handleCheck(todo.id)"就类似于v-model的功能。
<template>
  <li>
    <label>
      <input
        type="checkbox"
        :checked="todo.done"
        @change="handleCheck(todo.id)"
      />
      <!-- 这样做也能实现功能，但修改了props，所以不推荐 -->
      <!-- <input type="checkbox" :checked="todo.done" :v-model="todo.done"/> -->
      <span>{{ todo.name }}</span>
    </label>
    <button class="btn btn-danger" style="display: none">删除</button>
  </li>
</template>

<script>
export default {
  name: "MyItem",
  methods: {
    handleCheck(id) {
      this.checkTodo(id);
    },
  },
  props: ["todo", "checkTodo"],
};
</script>
  1. App.vue 中，书写修改数据方法，并传递给子组件，最终要传给孙子组件MyItem。
<MyList :todos="todos" :checkTodo="checkTodo" />

<script>
methods: {
    // 复选框状态改变，数据立刻变化，也就是done取反
    checkTodo(id) {
      this.todos.forEach((todo) => {
        if (todo.id === id) todo.done = !todo.done;
      });
    },
  },
};
<script/>
  1. MyList.vue，起到中转传递的功能，把父组件传来的函数，再传给子组件。
<MyItem :checkTodo="checkTodo" />

<script>
export default {
  props: ["todos", "checkTodo"],
};
</script>

实现删除功能

  1. MyItem.vue 中，加上样式后不起作用，找到原因是没加scoped。
<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>

<script>
export default {
  methods: {
    handleDelete(id) {
      if (confirm("delete ? ")) {
        this.deleteTodo(id);
      }
    },
  },
  props: ["todo", "checkTodo", "deleteTodo"],
};
</script>

<style scoped>
/*item*/
li:hover {
  background-color: #ddd;
}
li:hover button {
  display: block;
}
</style>
  1. App.vue
<MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />

<script>
export default {
  methods: {
    deleteTodo(id) {
      this.todos = this.todos.filter((item) => item.id !== id);
    },
  }
};
</script>
  1. MyList.vue
<MyItem :deleteTodo="deleteTodo" />

<script>
export default {
  props: ["todos", "checkTodo", "deleteTodo"],
};
</script>

实现底部功能

  1. MyFooter.vue 中，运用计算属性，其中做过事情数量的计算，用到了reduce。
<template>
  <div class="todo-footer">
    <label>
      <input
        type="checkbox"
        :checked="doneTotal === total"
        @change="handleCheckAll"
      />
    </label>
    <span>
      <span>已完成{{ doneTotal }}</span> / 全部{{ total }}
    </span>
    <button class="btn btn-danger" @click="clearAllTodo">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "MyFooter",
  props: ["todos", "checkAllTodo", "clearAllTodo"],
  computed: {
    // 事情的总数
    total() {
      return this.todos.length;
    },
    // 已经完成的事情数量
    doneTotal() {
      return this.todos.reduce(
        (pre, cur) => pre + (cur.done === true ? 1 : 0),
        0
      );
    },
  },
  methods: {
    // 全部勾选、全部不勾选功能
    handleCheckAll(e) {
      this.checkAllTodo(e.target.checked);
    },
  },
};
</script>
  1. App.vue
<MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo" />

<script>
export default {
  methods: {
    // 全选功能
    checkAllTodo(done) {
      this.todos.forEach((item) => (item.done = done));
    },
    // 清除所有事情
    clearAllTodo() {
      this.todos = this.todos.filter((item) => !item.done);
    },
  },
};
</script>
  1. MyFooter.vue中，全选还有另一种实现方式。使用v-model，以及计算属性。这里注意，isAll计算属性不能写成函数的形式，因为函数形式没有setter。
<input type="checkbox" v-model="isAll" />

<script>
export default {
  computed: {
    isAll: {
      get() {
        return this.total === this.doneTotal;
      },
      set(value) {
        this.checkAllTodo(value);
      },
    },
  },
};
</script>

添加本地存储

App.vue中

<script>
export default {
  name: "App",
  data() {
    return {
      todos: JSON.parse(localStorage.getItem("todos")) || [],
    };
  },
  methods: {
  watch: {
    todos: {
      deep: true,
      handler(value) {
        localStorage.setItem("todos", JSON.stringify(value));
      },
    },
  },
};
</script>

自定义事件实现子到父传值

  1. App.vue中，对 MyHeader 和 MyFooter 组件，:改成@即可
<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <MyHeader @addTodo="addTodo" />
      <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
      <MyFooter
        :todos="todos"
        @checkAllTodo="checkAllTodo"
        @clearAllTodo="clearAllTodo"
      />
    </div>
  </div>
</template>
  1. MyFooter.vue中，props不用接收函数，通过$emit触发事件。MyHeader.vue 同理，不做展示了。
<script>
export default {
  name: "MyFooter",
  props: ["todos"],
  computed: {
    isAll: {
      get() {
        return this.total === this.doneTotal;
      },
      set(value) {
        this.$emit("checkAllTodo", value);
      },
    },
  },
  methods: {
    clearAll() {
      this.$emit("clearAllTodo");
    },
  },
};
</script>

全局事件总线实现父向孙子传值

  1. main.js
new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#root')
  1. App.vue中，去掉传给MyList的 :checkTodo="checkTodo" :deleteTodo="deleteTodo"，给总线$bus绑定事件。MyList组件也不用向MyItem传值了。
<MyList :todos="todos"/>

<script>
export default {
  mounted() {
    this.$bus.$on("checkTodo", this.checkTodo);
    this.$bus.$on("deleteTodo", this.deleteTodo);
  },
  beforeDestroy() {
    this.$bus.$off("checkTodo");
    this.$bus.$off("deleteTodo");
  },
};
</script>
  1. MyItem.vue中，触发事件，之后 App 组件中的函数被调用，数据传递成功
<script>
export default {
  name: "MyItem",
  methods: {
    handleCheck(id) {
      this.$bus.$emit("checkTodo", id);
    },
    handleDelete(id) {
      if (confirm("delete ? ")) {
        this.$bus.$emit("deleteTodo", id);
      }
    },
  },
  props: ["todo"],
};
</script>

实现编辑功能

  1. MyItem.vue中，
<template>
  <li>
    <label>
      <input
        type="text"
        :value="todo.name"
        v-show="todo.isEdit"
        ref="InputTitle"
        @blur="handleBlur(todo, $event)"
      />
    </label>
    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    <button class="btn btn-danger" @click="handleEdit(todo)">编辑</button>
  </li>
</template>

<script>
export default {
  name: "MyItem",
  methods: {
    // 有isEdit直接更改，Vue可监测  没isEdit，直接添加对象属性默认没有数据监测，所以$set
    handleEdit(todo) {
      if (todo.hasOwnProperty("isEdit")) {
        todo.isEdit = true;
      }
      this.$set(todo, "isEdit", true);
      // 获取焦点,$nextTick的作用是DOM更新完再执行回调
      this.$nextTick(function () {
        this.$refs.InputTitle.focus();
      });
    },
    handleBlur(todo, e) {
      // 失去焦点,isEdit变化,引起上方DOM元素显示的变化
      todo.isEdit = false;
      // 没有输入内容什么都不做
      if (!e.target.value.trim()) return;
      // 有输入内容,就更改数据,引起上方DOM元素标题的变化
      this.$bus.$emit("updateTodo", todo.id, e.target.value);
    },
  },
  props: ["todo"],
};
</script>
  1. App.vue中，焦点消失的时候，更新对应事情的名称
<MyList :todos="todos"/>

<script>
export default {
  methods: {
    updateTodo(id, value) {
      this.todos.forEach((todo) => {
        if (todo.id === id) todo.name = value;
      });
    },
  },
  mounted() {
    this.$bus.$on("updateTodo", this.updateTodo);
  },
  beforeDestroy() {
    this.$bus.$off("updateTodo");
  },
};
</script>

总结

  1. 组件化编码流程：

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

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

      • 一个组件在用：放在组件自身即可。
      • 一些组件在用：放在他们共同的父组件上（状态提升）。

    • 实现交互：从绑定事件开始。

  2. props适用于：

    • 父组件 ==> 子组件 通信

    • 子组件 ==> 父组件 通信（要求父先给子一个函数）

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

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

HTML和CSS素材

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>React App</title>

  <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
      </div>
      <ul class="todo-main">
        <li>
          <label>
            <input type="checkbox"/>
            <span>xxxxx</span>
          </label>
          <button class="btn btn-danger" style="display:none">删除</button>
        </li>
        <li>
          <label>
            <input type="checkbox"/>
            <span>yyyy</span>
          </label>
          <button class="btn btn-danger" style="display:none">删除</button>
        </li>
      </ul>
      <div class="todo-footer">
        <label>
          <input type="checkbox"/>
        </label>
        <span>
          <span>已完成0</span> / 全部2
        </span>
        <button class="btn btn-danger">清除已完成任务</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>

CSS

/*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;
}

/*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);
}

/*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;
}

/*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;
}

/*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;
}
avatar
文章
阅读
粉丝