vue 简单指令使用，实现记事本案例

最近公司项目不忙，我终于有时间继续学习vue了，早上看了下官方文档，主要看了下指令，感觉还可以，就上手做了一个小案例，记事本功能。该案列包括以下功能：

1. 输入任务按回车键，列表就会新增一条数据
2. 输入完任务按回车后输入框将被清空
3. 底部有总记录数和清除所有数据
4. 鼠标悬浮列表上显示删除按钮可以删除数据

一、实现思路

1、通过输入框的 @keyup.enter 指令 绑定 添加方法，添加方 法中将输入的内容存到数组中保存

2、通过 v-for 指令 循环遍历数组元素并在 ul li 中动态显示出来

3、通过 v-shoow 指令与鼠标移入移出方法（@mouseover、@mouseleave） 控制删除按钮的显示与隐藏

二、实现代码

    
        
        
        
        
        
    
    
        
        

            
            

                
记事本
                
            
            
            

                

                    

                        {{ index + 1 + '. '}} {{ item}}
                        
                    
                
            
            
            

                {{ arr.length }} num
                clear
            
        
    
    
    

今天抽空将功能完善成 todolist ，后续会将完善的 todolist 更新上来~