Vue利用vite创建待办事项的部分代码，以及总结

//用了vite后，在组件标签就可以直接用局部注册的标签名了。像没用这个vite时，如果在body里面大写组件标签会有报错的情况，还有像在v-model写在组件时，在对应的子组件input里面要写:value="modelValue"，但props里面传的是model-value，还有像在写父传子的组件中属性名都要小写,如果大写，会将数据传undefined,就是没有接收到，给写代码带来了不少麻烦。总的来说。使用vite后方便写代码了很多

<script>
    import TodoHeader from './components/TodoHeader.vue'
    import TodoText from './components/TodoText.vue'
    import TodoCart from './components/TodoCart.vue'
    import TodoFooter from './components/TodoFooter.vue'
    var itemid=1
    export default {
        name: 'app',
        data() {
            return {
                arr: [],
                type: 'all',
                currentarr: []
            }
        },
        components: {
            TodoHeader,
            TodoText,
            TodoCart,
            TodoFooter
        },
        computed: {
            computetode() {
                return this.arr.filter(item => item.complate == true)
            },
            uncomputetode() {
                return this.arr.filter(item => item.complate == false)
            },
        },
        methods: {
            addcartin(title) {
                this.arr.push({
                    id: itemid++,
                    complate: false,
                    title
                })
            },
            removeall(data) {
                this.arr = data
            },
            remove(id) {
                this.arr = this.arr.filter(item => item.id != id)
            },
            tab(data) {
                this.type = data
            }
        },
        watch: {
            uncomputetode() {
                if (this.type == 'every') {
                    this.currentarr = this.uncomputetode
                } else if (this.type == 'some') {
                    this.currentarr = this.computetode
                } else {
                    this.currentarr = this.arr
                }
            },
            type: {
                handler(newtype) {
                    console.log(newtype)
                    switch (newtype) {
                        case 'all':
                            this.currentarr = this.arr
                            break
                        case 'some':
                            this.currentarr = this.computetode
                            break
                        case 'every':
                            this.currentarr = this.uncomputetode
                            break
                    }
                },
                immediate: true,
            },
        }

    }
</script>

<template>
    <div class="header">
        <TodoHeader @add="addcartin"></TodoHeader>
        <TodoText :type="type" @blue="tab" :computetode="computetode" :Uncomputetode="uncomputetode" :arr="arr">
        </TodoText>
        <todo-cart :list="currentarr" @remove="remove"></todo-cart>
        <todo-footer @clear="removeall"></todo-footer>
    </div>
</template>

<style>
    * {
        padding: 0;
        margin: 0;
    }

    ul,
    ol {
        list-style: none;
    }

    .header {
        width: 400px;

        margin: 0px auto;
        margin-top: 50px;
        box-shadow: 1px 1px 5px 5px;
    }

    .input {
        padding: 10px;
        height: 30px;
        display: flex;

    }

    .input input {
        padding-left: 10px;
        flex: 1;
    }

    .input button {
        width: 60px;
        height: 30px;
    }

    .text {
        padding: 10px;
        display: flex;

    }

    .text .list {
        flex: 1;

        text-align: center;
        cursor: pointer;
    }

    /*     .text div:nth-child(1){
                background-color: black;
                color: white;
                
            } */
    .text .active {
        background-color: black;
        color: white;

    }

    .cart {
        padding: 10px;
    }

    .cart li {
        height: 20px;

        display: flex;
        margin-bottom: 10px;
    }

    .cart li div {
        flex: 1;
        padding-left: 10px;
    }

    .cart li input {
        height: 20px;
        width: 20px;

    }

    .clear {
        padding: 10px;
        display: flex;
    }

    .clear div {
        flex: 1;
    }
</style>