【学习打卡】第4天 使用vue3实现todolist

课程名称：毕业一课通，从开题到答辩高效完成
课程章节：第3章 3-5 使用vue3实现todo list
主讲老师：然冬

课程内容：
vue3实现todolist
vue3的基本写法
vue3和vue2的区别

课程收货：
初步了解到怎么通过vue3实现一个小功能
1.vue2.0中是直接创建了一个vue实例
2.vue3.0中按需导出了一个createApp （ceateApp做了什么）
3.vue3中的app单文件不再强制要求必须有根元素 也就是说 在vue2.0中必须要有一个根元素，在vue3中没这个要求

<div id="app">
        <input 
            type="text" 
            class="input"
            v-model="inputValue"
            @keyup.enter="add"
        >       
        <p>列表：</p>
        <ul>
            <li v-for="(item,index) in list"
                @click="item.done =!item.done"
                :class="{
                    done:item.done,
                }"
                @contextmenu="remove(index,$event)"
            >
                {{ item.text }}
            </li>
        </ul>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
    <script>
        const ref = Vue.ref;
        const Todo = {
            setup(){
                const list = ref([]);
                const inputValue = ref('');

                const add = () =>{
                    list.value.push({
                        text:inputValue.value,
                        done:false,
                    })
                    inputValue.value = ""
                }

                const remove = (index,e) =>{
                    e.preventDefault()
                    list.value.splice(index,1)
                };

                return {
                    add,
                    remove,

                    list,
                    inputValue,
                }
            },
        };

        Vue.createApp(Todo).mount('#app')

    </script>

    <style>
        li{
            cursor: pointer;
        }
        .done{
            text-decoration: line-through;
            color: #eee;
        }
    </style>