简介

基于Vue半全家桶的新拟态板ToDoList，一个todolist而已，用几乎Vue全家桶是不是有点小题大做，是的，必须的，因为要巩固的知识，并且功能也相应的增加了，你可以打卡想看的书或者电影，以及小小的改变了todolist的相应逻辑，当天未完成的ToDo会累计到待完成任务，看着一天一天积下来的待办，多多少少希望减少你的惰性吧（希望目的达到），从而激发你一天满满的动力

注意：所使用的是localStorage存储数据（没用服务器），所以，如果你一不小心用了什么清垃圾软件或者手动清掉浏览器数据的话，它会消失，它会消失，它会消失

采用纯less写样式，只写了PC端响应式布局，没做移动端适配（就不要尝试用手机打开了，大丑）

在线地址

功能

输入代办，按下回车键，添加到当天待办事项
点击完成按钮，完成该代办，添加至完成事项
点击删除按钮，删除该待办
动态显示已完成和未完成事项数量
当天未完成待办，第二天添加至待完成任务，可在第二天点击“今天完成”重新添加至我的一天中
阅读选项打卡想看的书
电影选项卡打卡想看的电影
点击头像就是回到我的博客啦
导航栏右侧文字根据时间改变相应问候语

技术架构

Vue
Vue CLI
Vue Router
Less
webpack

组件划分

主要划分为三个大组件

NavBar

分为左中右三个插槽
中间添加待办事项
左插槽展示当前路由信息
右插槽按时间显示问候信息

SideBar

用来控制路由的主要组件
分为两个部分，一个头像模块，一个路由切换模块
路由切换模块放置切换路由的小item

TaskBar

放置待办的组件
根据待办状态显示不同状态的item

核心代码

最重要的当然就是侦听数据的改变啦，毕竟你时时刻刻都在改变数据，vue官网watch函数介绍

//监听数据变化
watch: {
  mydayList: {
    // 该回调会在任何被侦听的对象的 mydayList 改变时被调用，不论其被嵌套多深
    handler(){
      saveData( this.mydayList, "myday")
      getData()
    },
    deep: true          
  }
}

通过监听mydayList数据的变化，实时保存改变后的数据以及加载保存后的数据

其它就是简单的localStorage增删改查操作啦

函数封装

这里通过函数封装，得到localStorage增删查操作，并单独设置成一个js文件，后面组件需要用到即可直接导入使用

//获取本地数据
function getData(dataName) {
  // localStorge为window内置属性，用于在浏览器存储本地信息
  // 该数据除非手动删除，否则会一直存在
  // let data = localStorage.getItem("todoList") //取值
  let data = localStorage.getItem(dataName) //取值
  if (data !== null) {
    //ES6将变量作为键→[变量名]
    // return JSON.parse(data).[dataName] //将数据转换为json
    return JSON.parse(data)
  } else {
    return []
  }
}

//保存本地数据
function saveData(data, dataName) {
  //JSON.stringify()将json数据转换为字符串
  localStorage.setItem(dataName, JSON.stringify(data)) //设值    
}

//删除数据
function deleteData(index, dataName) {
  //获取本地数据
  let data = getData(dataName)
  // let index = index //获取索引号
  //改本地数据（删除数据）
  data.splice(index, 1)
  //保存本地数据
  saveData(data)
}

后面就是简单的给各个组件注册事件，然后执行相关操作就可以啦