TodoList经典案例

头部

1. 使用v-model来双向绑定title​​​​​​​
2. @keydown.enter="show" 绑定键盘回车事件
3. 下载nanoid之后  引入import {nanoid} from 'nanoid' 
4. 得要在v-model上面添加 ，trim清除空格 !this.title 代表空的时候弹出 alert
5. 引入App.vue时要this.函数名（）

<template>
    <div>
        <div class="todo-header">
            <!-- 清除空格 .trim -->
          <input type="text" v-model.trim="title" placeholder="请输入你的任务名称，按回车键确认" @keydown.enter="show" />
        </div>
    </div>
</template>
<script>
    // 获取id nanoid生成不同字符串id
    import {nanoid} from 'nanoid'
    export default{
        data(){
            return{
                title:""
            }
        },
        methods:{
            // 1.头部需要添加到相邻兄弟关系 所以需要先在父元素里面设置方法 通过:addTodo='addTodo' 传入到header里面 通过props接收
            // 定义一个添加的数据
            show(){
                if(!this.title){
                    alert("请输入内容")
                    return
                }
                // 添加的数据需要给input框 绑定v-model一个变量
                const todoObj = {id:nanoid(),title:this.title,done:false}
                // console.log(todoObj);
                // alert("sss")
                // 使用addTdo 添加方法
                this.addTodo(todoObj)
                // 填完完成后将文本框里面的title变量清空
                this.title=" "
            }
        },
        // 接收addTodo 方法
        props:['addTodo'],
    }
</script>

内容区域

1. 使用：props:['todo','deleteTodo','checkTodo'],来接收App.vue传输过来的方法
2. if(confirm("确定要删除吗？")){ } confirm写一个确定和取消的按钮

<template>
      <li>
          <label>
            <input type="checkbox" :checked="todo.done" @change="changedone(todo.id)"/>
            <span>{{todo.title}}</span>
          </label>
          <button class="btn btn-danger" @click="del(todo.id)">删除</button>
      </li>
</template>
<script>
import { del } from 'vue';

  export default{
    props:['todo','deleteTodo','checkTodo'],
    methods:{
      del(id){
        if(confirm("确定要删除吗？"))
        this.deleteTodo(id)
      },
      changedone(id){
        this.checkTodo(id)
      }

    }
  }
</script>
<style scoped>

</style>

App.vue

1. 引入子组件 ：import TodoHeader from '@/components/TodoHeader'
2. 注册子组件：components: {TodoHeader} 
3. 使用子组件：<TodoHeader :addTodo="addTodo"></TodoHeader> 向子元素传输函数需要加 ：
4. 添加功能：this.todos.unshift(todoObj)
5. 使用filter来过滤实现删除功能: this.todos=this.todos.filter(todo=>todo.id!==id)
6. 使用forEach来循环全部的todo数据

<template>
    <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <TodoHeader :addTodo="addTodo"></TodoHeader>
        <TodoList :todo="todos" :deleteTodo="deleteTodo" :checkTodo="checkTodo" ></TodoList>
        <TodoFooter :todo="todos" :completeDel="completeDel" :todoArraydone="todoArraydone"></TodoFooter>
      </div>
    </div>
  </div>
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// 头部
import TodoHeader from '@/components/TodoHeader'
// 中间部分
import TodoList from '@/components/TodoList'
// 尾部
import TodoFooter from '@/components/TodoFooter'
export default {
  name: 'App',
      data(){
        return{
            // 定义数据
            todos:[
                {id:"001",title:"吃饭",done:false},
                {id:"002",title:"睡觉",done:false},
                {id:"003",title:"敲代码",done:false}
            ]
        }
      },
      methods:{
        // 头部： 定义添加功能
        addTodo(todoObj){
          this.todos.unshift(todoObj)
        },
        //中间左边：定义删除功能 
        // 1. 先定义一个删除方法
        // 2. 在父元素通过 :deleteTodo="deleteTodo" 来传入子元素 在通过 :deleteTodo="deleteTodo"传入到子元素
        // 3. 给删除按钮添加点击事件传入 todo.id
        deleteTodo(id){
          this.todos=this.todos.filter(todo=>todo.id!==id)
          // console.log(id);
        },

        // 检测id修改todo设置dome属性
        checkTodo(id){
          this.todos.forEach(todo=>{
            // 当获取到的id和表单的id相同时取反
            if (todo.id===id) {
                todo.done=!todo.done
                return
            }
          })
          // console.log(id); 
        },
        // 删除已完成的
        completeDel(){
          this.todos=this.todos.filter(todo=>!todo.done)
          // alert("ss")
        },
        // 获取到全部的todos里面的 checked的状态
        todoArraydone(checked){
          this.todos.forEach(todo=>{
            todo.done=checked
          })
        }
      },
  // 注册组件
  components: {
    // HelloWorld,
    TodoHeader,
    TodoList,
    TodoFooter,
    
  }
}
</script>

<style>
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 {
  border: 1px solid red;  
  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 rgb(177, 177, 177);
  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;
  margin-top: 3px;
  display: none;
}
li:hover{
  background-color: gainsboro;
}
li:hover button{
  
  display: block;
} 
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;
}

</style>