用VUE实现TodoList1.0

实现功能：

1. 显示今日时间；
2. 可以添加待办事件；
3. 可以对已完成事件进行勾选删除并加入到已完成区域

代码实现：

DOM：

    <div id="app">
            <p style="color: rgb(103, 78, 173);font-size: 18px;text-align: end;width: 220px;">{{date}}</p>
            <input type="text" v-model="inputValue" @keyup.enter="handleBtnClick"/>
            <!-- 将文本框中的输入值与data中的inputValue值绑定在了一起 -->
            <button @click="handleBtnClick" >添加</button>
            <h2>代办事项：<button @click="handleClearClick">清空</button></h2>
            
            <ol>
                <!-- 可以在父组件中监听子组件的事件，通过v-bind绑定元素将子组件的值传给父组件 -->
                <todo-list v-for="(item,index) in todoList" 
                           :content=item
                           :index = index
                           @delete="handleItemDel">
                </todo-list>
            </ol>
            <h2>完成事项：</h2>
            <ul style="color:gray;">
                <li v-for="item in done"><del>{{item}}</del></li>
            </ul>
            <br>
            <button @click="handleResetClick">重置</button>
    </div>

JS:

1. 日期实现

 		var date = new Date();
        date = date.getFullYear() + "年" + parseInt(date.getMonth()+1) + "月" + date.getDate()+"日" ;
        //后将date赋予vue实例中的data对象里的date值

• 待办事件添加和删除

 var vm = new Vue({
            el:'#app',
            data:{
                todoList:[],
                done:[],
                inputValue:'',
                date: date
            },
            methods: {
                handleBtnClick: function(){
                    this.todoList.push(this.inputValue);
                    this.inputValue = '';
                },
                handleItemDel: function(index,check){
                    this.done.push(this.todoList[index]);
                    this.todoList.splice(index,1);
                    check=false;
                },
                handleClearClick: function(){
                    this.todoList = [];
                },
                handleResetClick: function(){
                    this.todoList = [];
                    this.done = [];
                }
            },
            components:{
                TodoList:TodoList
            }
        })

• 在< ul > 里定义局部组件 < todo-list >
• 用v-for指令获取vue实例中的todoList数组中的每个元素
• 用v-model指令来双向绑定Input中的inputValue值与vue实例中data对象的inputValue值
• 可用v-on绑定点击事件（简写为@click）
• 可以用this.$emit(“事件名”,子组件传给父组件的参数)来向外传递子组件的事件

小结

1. Vue是一种MVVM的设计框架（model,view model, view）大大减少了的对dom的操作，将其转化为面向数据的编程。
2. 关于父组件与子组件的数值传递还有待进一步改进

问题遗留

1. 在同时有个两个及以上的代办事件时，勾选上一个事件后，下一个事件的checkbox框变为打钩状态？