Vue基础案例-----Todos(1)

@要实现的效果

@把待办任务, 展示到页面TodoMain.vue组件上

思路：App.vue（父组件） 准备数据传入TodoMain.vue（子组件）内，v-for循环展示数据

父传子：1. 子组件 - props - 变量 (准备接收)、2. 父组件 - 传值进去

App.vue

<TodoMain  :zlist="list"></TodoMain>
export default {
  data() {
    return {
      list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    };
  }
};

 TodoMain.vue

 <template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <li class="completed" v-for="obj in zlist" :key='obj.id'>
      <div class="view">
        <input class="toggle" type="checkbox" />
        <label>{{obj.name}}</label>
        <button class="destroy"></button>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props:["zlist"]  //这里可以和父组件中定义的名字zlist不一样
}
</script>

@关联选中状态, 设置相关样式

思路： 给input框v-model绑定复选框选中状态， 根据选中状态, 设置完成划线样式

注：只需要在上述代码中增加下面标红的代码就可以实现该需求

 <input class="toggle" type="checkbox" v-model="obj.isDone"/>

<li :class="{completed: obj.isDone}" v-for="(obj, index) in arr" :key='obj.id'>

效果如图

@ 添加任务

在顶部输入框输入要完成的任务名, 敲击回车, 完成新增功能

思路：

①TodoHeader.vue – 输入框 – 键盘事件 – 回车按键

②子传父, 把待办任务 – App.vue中 – 加入数组list里

③原数组改变, 所有用到的地方都会更新

④输入框为空, 提示用户必须输入内容

实现：TodoHeader.vue

<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" >
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="downFn"
      v-model="task"
    />
  </header>
</template>

<script>
export default {
   data(){
    return {
      task: ""
    }
  },
   methods: {
    downFn(){
      if (this.task.trim().length === 0) {
        alert("任务名不能为空");
        return;
      }
      // 3.2(重要) - 当前任务名字要加到list数组里
      // 子传父技术
      this.$emit("create", this.task)
      this.task = ""
    }
  }
}
</script>

App.vue

 <TodoHeader @create="createFn"></TodoHeader>
 methods: {
   createFn(taskName){ // 添加任务
      // 3.3 push到数组里
      let id = this.list.length == 0 ? 100 : this.list[this.list.length - 1].id + 1
      this.list.push({
        id: id,
        name: taskName,
        isDone: false
      })
    }
}