基于Vue半全家桶的新拟态板ToDoList(点击访问在线地址),一个todolist而已,用几乎Vue全家桶是不是有点小题大做,是的,必须的,因为要巩固的知识,并且功能也相应的增加了,你可以打卡想看的书或者电影,以及小小的改变了todolist的相应逻辑,当天未完成的ToDo会累计到待完成任务,看着一天天积下来的待办,多多少少会减少你的惰性吧(希望目的达到),从而激发你一天满满的动力哈哈哈
注意:所使用的是localStorage存储数据(没用服务器),所以,如果你一不小心用了什么清垃圾软件或者手动清掉浏览器数据的话,它会消失,它会消失,它会消失
采用纯less写样式,只写了PC端响应式布局,没做移动端适配(就不要尝试用手机打开了,大丑)
当然就是在PS中画大概的设计图啦,设计稿尺寸是1920*1080,如下图
啊这啊这,这和成果图差距怎么这么大,好吧,确实一开始是按这样搭建的,骨架基本就是这样的,后面因为突发奇想,之前在手机的主题市场看过新拟态设计,然后被深深吸引了,在完成页面的过程就想起这个,然后就干脆按这个骨架直接重构页面了,也就是上面的成果图,废话不多说,直接进入主题
src下的目录结构
主要划分为三个大组件
NavBar
SideBar
TaskBar
最重要的当然就是侦听数据的改变啦,毕竟你时时刻刻都在改变数据,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) }
后面就是简单的给各个组件注册事件,然后执行相关操作就可以啦
引用文件前必须加./
vue.config.js修改后必须重启项目才能生效
插槽若被替换那么给slot定义的class就会失去效果
解决:slot外部使用div包裹并设置样式
img路径无法通过prop传值(至少在开发环境下是这样)
无法显示,因为直接引用到服务器地址去
vue获取样式也是驼峰命名法(background-color→backgroundColor)
id会覆盖之前的id样式(之前的id不起作用)
text-indent::2em ——缩进
取消按钮点击效果:伪类:focus
v-bind会解析变量类型,无定义则全部强制字符串
user-select:none ——不允许用户选择文字
img通过prop传值会出错,因为开发时会解析成服务器地址
event.target.value获取控件输入值
[变量名]会解析成键
取消滚动条,分别是IE、Firefox、chrome/safari
-ms-overflow-style: none; overflow: -moz-scrollbars-none; &::-webkit-scrollbar { width: 0 !important }
vue引用全局less文件,在vue.congfig.js配置
//全局引用less文件 css: { loaderOptions: { less: { globalVars: { hack: `true; @import '~@/assets/css/base.less';`, } } } },
map、forEach和filter函数的区别(迭代)
最后,就这样啦,新拟态板ToDoList主要就是为了复习Vue以及LocalStorage的相关知识点。