本文主要是介绍基于VUE的新拟态ToDoList（待办事项添加），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

简介

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

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

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

设计图

当然就是在PS中画大概的设计图啦，设计稿尺寸是1920*1080，如下图

啊这啊这，这和成果图差距怎么这么大，好吧，确实一开始是按这样搭建的，骨架基本就是这样的，后面因为突发奇想，之前在手机的主题市场看过新拟态设计，然后被深深吸引了，在完成页面的过程就想起这个，然后就干脆按这个骨架直接重构页面了，也就是上面的成果图，废话不多说，直接进入主题

功能

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

所用技术

• Vue
• Vue CLI
• Vue Router
• Less
• webpack

划分目录

src下的目录结构

• network （网络模块）→相关网络请求（axios）
• components （组件）
  • common （公共模块）→可以多项目复用
  • content （业务模块）→该项目可以复用
• views （路由页面模块）
• common （公共js文件–常量…）
• assets （静态资源）
• router （路由）→页面跳转
• store （vuex状态管理）

组件划分

主要划分为三个大组件

NavBar

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

SideBar

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

TaskBar

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

路由划分

1. myday：当然就是我的一天啦，添加你今天要做的事情
2. movie：电影，存放你想看的电影以及打卡的电影
3. read：阅读，存放你想看的图书以及打卡的书
4. todo：你一天没做完的事情都会丢到这里，第二天你可以重新拾取到新的一天里面

核心代码

最重要的当然就是侦听数据的改变啦，毕竟你时时刻刻都在改变数据，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)
}

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

遇到的问题

1. 引用文件前必须加./

2. vue.config.js修改后必须重启项目才能生效

3. 插槽若被替换那么给slot定义的class就会失去效果

   解决：slot外部使用div包裹并设置样式

4. img路径无法通过prop传值（至少在开发环境下是这样）

   无法显示，因为直接引用到服务器地址去

5. vue获取样式也是驼峰命名法（background-color→backgroundColor）

6. id会覆盖之前的id样式（之前的id不起作用）

学到的新知识点（或遗忘的知识点）

1. text-indent:：2em ——缩进

2. 取消按钮点击效果：伪类:focus

3. v-bind会解析变量类型，无定义则全部强制字符串

4. user-select：none ——不允许用户选择文字

5. img通过prop传值会出错，因为开发时会解析成服务器地址

6. event.target.value获取控件输入值

7. [变量名]会解析成键

8. 取消滚动条，分别是IE、Firefox、chrome/safari

       -ms-overflow-style: none;
   	overflow: -moz-scrollbars-none;
   	&::-webkit-scrollbar { width: 0 !important }
   

9. vue引用全局less文件，在vue.congfig.js配置

     //全局引用less文件
     css: {
       loaderOptions: {
         less: {
           globalVars: {
             hack: `true; @import '~@/assets/css/base.less';`,
           }
         }
       }
     },
   

10. map、forEach和filter函数的区别（迭代）

最后，就这样啦，新拟态板ToDoList主要就是为了复习Vue以及LocalStorage的相关知识点。

这篇关于基于VUE的新拟态ToDoList（待办事项添加）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！