VUE-TODULIST(失败案例演示)

序：这是一个使用TODOLIST的反面教程！完全没明白怎么回事，繁琐而又闹心！

//这个是APP.vue文件里面的！
<template>
    <div class="todo-container">
      <div class="todo-wrap">
        <Header/>
        //这里有个列表，代表作的事情！
        <List :todos="todos"/>
        <Footer/>
      </div>
    </div>
</template>
<script>
  import Header from "./components/Header";
  import List from "./components/List";
  import Footer from "./components/Footer";
  export default {
    name: 'App',
      data(){
        return{
        //这个是数据，和前面的进行绑定！
            todos:[
                {title:'学习VUE组件通信',finished:true},
                {title:'学习react组件',finished:false},
                {title:'学习javascript组件通信',finished:false}
            ]
        }
      },
    components: {
      Footer,
      List,
      Header
    }
  }
</script>
<style scoped>
</style>

//这个是header.vue里面的内容！
<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入今天的任务清单，按回车键确认！"/>
    </div>
</template>
<script>
    export default {
        name: "Header"
    }
</script>
<style scoped>
</style>

//这个是List.vue里面的内容！
<template>
    <ul class="todo-main-list">
        <Item
        //下面为在todos里面遍历，其中，todo和todo是一个类型！
                v-for="(todo,index) in todos"
                :todo="todo"
        />
    </ul>
</template>
<script>
    import Item from "./Item";
    export default {
        name: "List",
        components: {Item},
        props:{
        //这里面定义了todos为一个数组类型的数据。
            todos: Array
        }
    }
</script>
<style scoped>
</style>

//这个是Item.vue里面的内容！
<template>
   <li
            @mouseenter="dealShow(true)"
            @mouseleave="dealShow(false)"
            :style="{backgroundColor:bgColor}"
    >
        <label>
        //绑定了数据todo的finished显示出来为title
            <input type="checkbox" v-model="todo.finished"/>
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-warning">删除</button>
    </li>
</template>
<script>
    export default {
        name: "Item",
        props:{
            todo: Object
        },
        data(){
            return{
                isShowDelButton: false,
                bgColor: '#fff'
            }
        },
        methods:{
            dealShow(isShow){
                this.isShowDelButton=isShow;
                this.bgColor = isShow ? '#ddd' : '#fff'
            }
        }
    }
</script>
<style scoped>
</style>

//footer里面的内容。
<template>
    <div class="todo-footer">
        <label>
            <input type="checkbox"/>
            <span>已完成0件/总计2件</span>
        </label>
        <button class="btn btn-warning">清除已完成任务</button>
    </div>
</template>
<script>
    export default {
        name: "Footer"
    }
</script>
<style scoped>
</style>

这里面讲了个我不太懂的东西！父组件传给子组件，子组件再传给子组件！
下面依次为三个组件，祖父组件，父组件，子组件！

<List :todos="todos" :delTodo="delTodo"/>
data(){
        return{
            todos:[
                {title:'学习VUE组件通信',finished:true},
                {title:'学习react组件',finished:false},
                {title:'学习javascript组件通信',finished:false}
            ]
        }
      methods:{
        //根据1索引删除记录！数据在哪里，方法在哪里！
          delTodo(index){
              this.todos.splice(index,1)
          }
      }

    <ul class="todo-main-list">
        <Item
                v-for="(todo,index) in todos"
                :todo="todo"
                :index="index"
                :delTodo="delTodo"
        />
    </ul>
            props:{
            todos: Array,
            delTodo:Function
        }
    

  <button v-show="isShowDelButton" class="btn btn-warning" @click="delItem">删除</button>
    props:{
            todo: Object,
            index:Number,
            delTodo:Function
            //当前任务在总任务数组下标位置
        },
        data(){
            return{
                isShowDelButton: false,
                bgColor: '#fff'
            }
        },
        methods:{
            dealShow(isShow){
                this.isShowDelButton=isShow;
                this.bgColor = isShow ? '#ddd' : '#fff'
            },
            delItem(){
                if (window.confirm(`您确认删除${this.todo.title}`)){
                    this.delTodo(this.index)
                }
            }
        }

这个失败案例，只是写给我自己，没好好听课！还总是不专心，其次，太着急了！最后就是没怎么认真听，就开始实操，基础太差了！

标签：VUE,演示,title,isShow,finished,todos,组件,false,TODULIST
来源： https://blog.csdn.net/weixin_45799003/article/details/114760856