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修饰符sync(转载)


下一篇:常用的生命周期函数