VUE-TODULIST(失败案例演示)

2021-03-13 20:57:06 阅读：212 来源： 互联网

标签：VUE 演示 title isShow finished todos 组件 false 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE-TODULIST(失败案例演示)