vue案例todo-list(computed，methods，传参等技术练手)

效果浏览

案例结构

App.vue{
	components{
		Top.vue,
		List.vue:{Item.vue},
		Bottom.vue		
	}
}

Item.vue中间组件里的单条数据

<template>
  <!-- List里的单个Item -->
  <div class="item all_border">
    <div class="left left_">
      <!-- 拿todo.done给checked赋值, -->
      <!-- input框值发生改变时调用handleCheck -->
      <!-- vue只会监视浅层次的值修改,所以当勾选和反选的时候todo.done可以被修改 -->
      <!-- 但是如果这样类似todo = {x:1,y:2}这样浅层次的修改就会被vue阻止 -->
      <input
        type="checkbox"
        class="check_item"
        :checked="todo.done"
        @change="handleCheck(todo.id)"
      />
      <span class="tag">{{ todo.title }}</span>
    </div>
    <div class="right right_">
      <button class="button_bg button_hide" @click="deleteItem(todo.id)">删除</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyItem",
  // 从List.vue那里拿来一条数据，一个方法
  props: ["todo", "checkTodo","deleteTodo"],
  methods: {
    // input框值发生改变时调用handleCheck
    handleCheck(id) {
      //通知app将todo对象取反
      this.checkTodo(id);
    },
    // 删除数据
    deleteItem(id){
        if(confirm('确认删除吗'))
        this.deleteTodo(id);
    }
  },
};
</script>

<style scoped>
/* 单个Item布局 */
.item {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
}
/* item鼠标悬浮改变背景色 */
.item:hover{
  background-color: #ddd;  
}
/* 鼠标悬浮时显示按钮 */
.item:hover .button_hide{
    display: block;
}
/* 单个Item左边宽度 */
.left_ {
  width: 89%;
}
/* 单个Item右边宽度 */
.right_ {
  width: 10%;
}
/* 隐藏按钮 */
.button_hide{
  display: none;
}  

</style>

List.vue中间组件

<template>
  <div class="list">
    <!-- v-for使用App传入的todos数组循环渲染 -->
    <!-- :key设置键值 -->
    <!-- :todo传给个子组件单一条数据 -->
    <!-- :checkTodo从App那里拿来的方法再传给子组件Item.vue -->
    <!-- :deleteTodo从App那里拿来的方法再传给子组件Item.vue -->
    <item
      v-for="todo in todos"
      :key="todo.id"
      :todo="todo"
      :checkTodo="checkTodo"
      :deleteTodo="deleteTodo"
    />
  </div>
</template>

<script>
import Item from "./Item.vue";//加载子组件模块
export default {
  name: "MyList",
  // 定义子组件
  components: {
    Item,
  },
  // 从App接收todos数组和checkTodo方法
  props: ["todos","checkTodo","deleteTodo"],
};
</script>

<style>
/* list布局 */
.list {
  width: 90%;
  height: auto;
  margin-top: 15px;
}
</style>

Top.vue头部组件

<template>
  <div class="top all_border">
    <!-- @keyup.enter回车时调用add方法 -->
    <input
      type="text"
      class="all_border"
      placeholder="请输入你的任务名称，按回车键确认"
      @keyup.enter="add"
      v-model="title"
    />
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "MyTop",
  props: ["addTodo"], //拿到父组件的方法
  data() {
    return {
      title: "",
    };
  },
  methods: {
    //添加一条数据
    add(e) {
      console.log("插入'" + e.target.value + "'成功！");
      if (!this.title.trim()) return alert("输入不能为空");
      //生成一条数据
      const todo = { id: nanoid(), title: this.title, done: false };
      //调用父组件方法
      this.addTodo(todo);
      this.title = "";
    },
  },
};
</script>

<style scoped>
/* 顶部布局 */
.top {
  width: 90%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
/* input宽高 */
input {
  width: 100%;
  height: 90%;
}
</style>

Bottom.vue底部组件

<template>
  <!-- 底部组件 -->
  <div class="bottom" v-show="total">
    <div class="left left_">
      <input type="checkbox" v-model="isAll"/>
      <!-- <input type="checkbox" class="check_item" :checked="isAll" @change="checkAll"/> -->
      <span>已完成 {{doneTotal}}/ 全部 {{total}}</span>
    </div>
    <div class="right right_">
      <button class="button_bg" @click="clearAll">清除已完成任务</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyBottom",
  props:['todos',"checkAllTodo","clearAll"],
  computed:{
    // 返回数组长度
    total(){
      return this.todos.length;
    },
    doneTotal(){
      // 使用reduce方法对数组进行统计
      // reduce方法将根据数组的长度来递归调用
      // 末尾0是你穿进去的初始值pre
      // current是数组单个元素
      // pre+(current.done?1:0)
      // 当current.done=true时返回1
      // 再跟你传进去的pre值累计最终返回有多少条符合条件
      return this.todos.reduce((pre,current)=>pre+(current.done?1:0),0);
    },
    isAll:{
      // 用户读取数据时调用
      get(){// 调用上面计算属性判定(未完成数===总数&&并且总数大于0)返回布尔值
        return this.doneTotal === this.total&&this.total>0;
      },
      //当数据被读取时,会传该值到set()
      set(value){
        // 调用父组件方法
        this.checkAllTodo(value);
      }
    }
  }
};
</script>

<style scoped>
/* 底部框布局 */
.bottom {
  display: flex;
  width: 90%;
  height: 30px;
  margin-top: 10px;
}
/* 底部左边宽度 */
.left {
  width: 69%;
}
/* 底部右边宽度 */
.right {
  width: 30%;
}
</style>

App.vue调用组件Top，List，Bottom

<template>
  <div class="app all_border">
    <!-- 显示三个子组件 -->
    <top :addTodo="addTodo"></top>
    <!-- 传给List.vue一个todos数组,一个checkTodo方法,一个deleteTodo方法 -->
    <list :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></list>
    <bottom :todos="todos" :checkAllTodo="checkAllTodo" :clearAll="clearAll"></bottom>
  </div>
</template>

<script>
import Top from "./components/Top.vue";
import List from "./components/List.vue";
import Bottom from "./components/Bottom.vue";
//创建App组件
export default {
  name: "App", //组件名称
  components: { Top, List, Bottom },//定义子组件
  data() {
    return {
      todos: [
        { id: "0001", title: "吃饭", done: true },
        { id: "0002", title: "睡觉", done: false },
        { id: "0003", title: "打游戏", done: true },
        { id: "0004", title: "上班", done: true },
      ],
    };
  },
  methods: {
    //添加一条数据
    addTodo(todo) {
      this.todos.unshift(todo);
    },
    //勾选或者取消勾选
    checkTodo(id) {
      //循环App-data里的todos数组
      this.todos.forEach((todo) => {
        //判定数据里的id是否等于勾选列表的id
        if (todo.id === id) todo.done = !todo.done;
      });
    },
    //删除一条数据
    deleteTodo(id){
      // 过滤数组
      this.todos = this.todos.filter(todo=> todo.id !== id);
      //完整写法
      // this.todos = this.todos.filter((todo)=>{
      //   return todo.id !== id;//假如条件达成则返回todo
      // });
    },
    //全选或者全不选
    checkAllTodo(done){//传进单个值
      //将数组里所有的done元素=传进来的值
      this.todos.forEach((todo) => {
        todo.done = done;
      });
    },
    clearAll(){
      //过滤数组将所以done==false的元素过滤掉
      if(confirm('确认删除选中任务吗'))
      this.todos = this.todos.filter((todo)=>{
        return !todo.done;
      });
    }
  },
};
</script>

<style>
/* 最外层App的样式 */
.app {
  width: 500px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* 全局按钮的样式 */
.button_bg {
  background-color: #e46852;
  border: 0.5px solid #eb9282ce;
  border-radius: 3px;
  color: aliceblue;
  width: auto;
  height: 25px;
}
/* 所以复选框和文本的宽度 */
.check_item,
.text {
  width: auto;
}
/* 所有框线 */
.all_border {
  border: 1px solid rgba(168, 163, 163, 0.548);
  border-radius: 3px;
}
/* Item、底部(右边布局) */
.right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
/* Item、底部(左边布局) */
.left {
  display: flex;
  justify-content: start;
  align-items: center;
}
</style>