vuecli-使用自定义组件实现TodoList

vuecli-使用自定义组件实现TodoList

实现todolist官网效果

http://todolist.cn/

准备2个子组件:Input.vue，List.vue；准备1个父组件：App.vue

Input.vue--- 用户在input文本框中输入内容，有的时候，输入完内容敲回车，希望内容保留；有的时候，输入完内容敲回车，希望内容清空。

这里自定义一个属性clear，给其默认值为false--就是不清空,去控制这个文本。

<template>
    <input type="text" v-model="value" @keypress.enter="handleEnter">
</template>

<script>
export default {
    // 自定义属性
     props:{
         clear:{
             type:Boolean,
             default:false
         }
     },
    data() {
        return {
            value:''
        };
    },
    methods: {
        handleEnter(){
            console.log(this.value)
            // 自定义事件enter,并且将 一个值 传过去
            this.$emit('enter',this.value);
            //  如果自定属性clear的值是真的话
            if(this.clear){
                // 将input文本框中的值--清空！
                this.value = ''
            }
        }
    },
};
</script>

<style scoped>

</style>

App.vue---父组件 引入2个子组件 使用

<template>
    <div>
        <my-input></my-input>

        <my-list></my-list>
        
        <my-list></my-list>
    </div>
</template>

<script>
import Input from '@/views/Input.vue'
import List from '@/views/List.vue'
export default {
    data() {
        return {
            
        };
    },
    methods: {
        
    },
    components:{
        'my-input':Input,
        'my-list':List
    }
};
</script>

<style scoped>

</style>

如果 有的时候，输入完内容敲回车，希望内容清空。

你在这里修改：

clear的默认值为true，即可。

页面预览效果，如下所示：

到这里，我们设计的 Input.vue组件，就设计好了。

接着看App.vue-和 List.vue--- title 传不同的值过来，显示不同的内容！

接着看App.vue-和 List.vue---用户在Input文本框，输入的值，存储到App.vue数据中心data中的list数组中，然后将这个数组 传递给 List.vue子组件的 自定义属性data

            去使用！！

在input文本框中，输入数据，数据存储到App.vue的数据中心data中的list，list中的数据，传递给子组件List.vue中自定义属性data里，预览效果如下所示：

再接着看List.vue 和App.vue--- 删除list.vue 组件 无序列表上的内容，点击“删除”按钮，执行删除操作。

注意：

        del(item,index){
            // 注意：这里2个索引容易搞混淆！！
            // 我们不需要用index这个索引
            //console.log(index)

            // 我们当前需要的是，拿到 当前这项内容，所在 位置的索引
            let i = this.list.indexOf(item);
            // 然后将 这个位置上的内容 删除掉
            this.list.splice(i,1)
        }

对比：

获取index的索引，结果如下所示：

再接着看List.vue----List.vue中自定义属性data中的数据，如果你 需要对data 通过一些计算得到 一些你需要的 筛选的数据。

这里的重点是：done的使用！！（通过这个属性，去控制 到底 是已完成，还是未完成的！）

在list.vue组件中，自定义属性done

List.vue自己的视图层使用done这个自定义属性：

预览效果如下所示：

注意：

也可以这样写：（因为它是布尔类型，可以直接done这样写上 就ok了，如下所示：）

List.vue自己的逻辑层使用done这个自定义属性：

done怎么控制 视图层li的显示？---data的数据

           <li v-for="(item,index) in data" :key="index">
               <input type="checkbox" :checked="done">
               <span>
                   {{item.title}}
                </span>
                <button @click="handleDel(item,index)">删除</button>
           </li>

怎么表示 已完成的？

怎么表示 未完成的？

----data的数据 是通过一系列的运算得到的，你可以通过计算属性得到它。

你可以在计算属性computed中设置，如下所示，

computed:{

    showList(){

        return this.data.filter()

    }

}

    computed:{
        showList(){
            // filter把符合条件的“过滤出来”，放在一个新数组里面
            return this.data.filter((item)=>{
                // 如果 自定义属性中的done的值，正好 
                // 和 当前遍历的过程中 的item.done 这一项的值 相等
                // 我们将 这样的数据项 拿到，为我们 所用！！！
                // 我们要过滤 item.done 等于 当前传进来的done
                return item.done = this.done
            })
        }
    },

预览效果，如下所示：

接着，

list.vue组件上，添加 复选框

<input type="checkbox" :checked="done">

在App.vue中视图层上的 ，my-list.vue组件上添加  点击事件

 <my-list title="正在进行" :data="list" @change="success"  @remove="del"></my-list>

所有的业务逻辑，全部由 使用者来完成，这里的使用者是---App.vue

在List.vue组件中，添加复选框，

点击后，“发生什么”，“干什么”，我（List.vue）是不管的！！

在App.vue中视图层上的 ，这个标签（my-list.vue组件上）添加  点击事件

 <my-list title="正在进行" :data="list" @change="success"  @remove="del"></my-list>

这个change事件，是我们在底层什么的，至于它要干什么？我们在使用的标签的时候，才申明~~@change="success"，success它要改变done的状态。

预览，效果如下所示：

接着，我们点击 每一个列表项，我们要实现完成修改的操作。

设置span标签为行内块元素，在span标签下，添加input标签，如下所示：

               <span class="list-item">
                   {{item.title}}
                </span>
                <input type="text" v-model="item.title" class="update-input">

css样式：

<style scoped>
ul{
    list-style: none;
}
li{
    margin: 20px 0;
}
.list-item{
    display: inline-block;
    width: 200px;
    height: 30px;
}
.update-input{
    width: 200px;
    height: 30px;
}
</style>

预览效果如下所示：