【Vue】零基础学习Vue: 第19课 Vue实现动态便签功能支持本地存储小案例

实现后的效果图：

以下是全部实现代码注解很详细哦！如有疑惑可以评论留言：

    
    便签
    
    
    
    
    
        *{margin:0;padding:0;}
        #app{
            width:1024px;
            margin: 10px auto;
        }
        .note{
          display: inline;
        }
        .on{
          color:#ccc;
          text-decoration: line-through;
          /* text-decoration: line-through;字上画线属性 */
        }
    



  
  

    

      
      今天还有{{num}}件事未做
      
      
    
    

      

        
        

          
          

            
            
            {{todo.thing}}
          
          
          
          
          
          
          
        
      
    
    

      

        
        
所有任务
        
已完成
        
未完成
      
    
  

  
  



    let vm = new Vue({
        el:'#app',
        data:{
          title:'',      //记录添加任务输入的值
          hash:'#all',  //记录url变化 进行任务状态切换
          todos:[ //todos数组存放添加的便签任务
            // isSelected:记录事情是否勾选 勾选表示已完成
            // thing:记录事情的内容
            // isDouble:记录任务是否在更改状态 false:不在更改状态 (双击可更改)
            {isSelected:false,thing:'洗衣服',isDouble:false},
            {isSelected:false,thing:'看书',isDouble:false}
          ]
        },
        created(){  //生命周期函数 url改变就会执行此函数
          //拿到本地储存的数据
          this.todos = JSON.parse(localStorage.getItem('todos'))||[]
          //监听hash值的变化 hashchange是规定的方法
          window.addEventListener('hashchange',()=>{  //括号函数内部this指向外部this
                this.hash = window.location.hash;
          })
        },
        watch: {  //属性监听
          todos:{ //监听todos属性变化 执行
            handler(){
              localStorage.setItem('todos',JSON.stringify(this.todos))  //本地存储
            },
            deep:true,          //深度监视todos
          }
        },
        computed: { //计算属性缓存
          num(){  //num是一个计算属性 时时监测计入任务的变化 filter:管道符 遍历筛选todos数组中isSelected值为false的值 并返回长度
            return this.todos.filter(todos=> !todos.isSelected).length
          },
          filterTodos(){  //监测hash的值从而输出不同的数组 实现任务状态切换
            if(this.hash==='#finish') return this.todos.filter(todos=> todos.isSelected)
            if(this.hash==='#unfinish') return this.todos.filter(todos=> !todos.isSelected)
            return this.todos
          }
        },
        methods: {  //存方法
          add(){  //添加任务方法
            if(this.title){ //添加任务框是否输入了值 是就执行下面给todos数组push添加任务
              this.todos.push({isSelected:false,thing:this.title,isDouble:false})
              this.title = ""
            }
          },
          remove(index){  //删除任务方法
            this.todos.splice(index,1)
          },
          update(index){  //设置任务修改的状态 isDouble:true为正在修改
            this.todos[index].isDouble = !this.todos[index].isDouble
          },
          blur(index){
                this.todos[index].isDouble=false;
          }
        },
        directives:{  // directives 内存放的是自定义的指令
          focus(el){
            el.focus()  //让元素获取焦点
          }
        }
    })