2021.08.02 星期一
学习vue也有一段时间时间了,回想一下学的都是一些概念,实际操作很少,所以今天我在网上重新又找了一个博主的视频讲解,看了一下之后,感觉他每次讲一个小内容的时候,都会有好几个小案例,而且我觉得这些小案例比之前那个博主都会好挺多,再加上之前那个年代也有点久远,所以便跟着新的进度去学习。今天首先将之前学的一些大概内容都按照这个老师的思路去过了一遍,也写了几个小案例,同时还新学了一些东西,比如监视,遍历数组的里面key的详细原理,生命周期基本用法等等。
总结上一周在宿舍学习自我感觉每天学习的内容有点少。这段时间睡午觉总是会睡很久,导致学习的内容太少,今晚制定一个计划,从明天开始严格执行,做到学习休息运动平衡!
这是今天写的demo:https://plnkr.co/edit/nxc7O0HxVyhvmAqD
2021.08.03 星期二
今天先将昨天剩下的生命周期给学习完。生命周期包含了3个流程,挂载流程:包含了4个函数,beforecreated, created, beforemounted, mounted,用的多的是mounted,通常会写绑定一些自定义事件,定时器等。更新流程:包含了beforeupdate, updated销毁流程:beforeDestroy,Destroy,用的多的是beforDestroy,通常写一些整个流程结束需要进行的操作。
一个vue文件就是一个组件,一整个单文件组件的结构包含了多个vue,APP.vue, main.js, index.html。APP.vue文件是用来汇总所有的vue文件的,即将所有的组件汇总到APP.vue里。main.js是用来创建APP.vue实例的,index.html用来展示页面。然后跟着进程创建了一个含脚手架的小项目。然后将项目里面的所有都了解了一遍。
晚上去网站上看了看那些算法题发现一头雾水,于是找了些资料准备正式去学习理解算法。
明天打算用vue框架靠自己的一些理解再一次去写一些小功能(比如增删改查);继续学习框架;晚上再去学习接触算法。
2021.08.04 星期三
今天学习了render函数,用render函数的原因是vue框架中的版本只包含核心功能,没有模板解析器。mixin混入可以将多个组件里面包含的功能配置放入到一个js中,当有组件要用它的时候可以进行调用。之后有重新熟悉了一下props和ref等内容。
下午开始做一个小案例:一个备忘录,可以添加,删除等一下操作。不管做什么功能或者以后做项目,完成它们需要有这几步:1、先将静态页面完成好,包括样式等等。2、将一些动态的数据给完成好。3、将交互的内容给完成好。做这个功能的时候虽然和上次我做的功能有相似之处,但这次是将每个组件都拆分开,之后在汇总到APP.vue上面,这让我对vue框架的结构,以后构建vue框架更加熟练。我在做第一步的时候,css样式不是很熟练,日后还需要进行加强学习。第二步做的内容是将数据展示到页面中,这个步骤其实还好,没有遇到很大的困难。在做第三步,添加事件的时候,不知道该如何将数据从子组件传到APP.vue(即父组件)上,然后根据教学,了解到可以先在父组件上写一个方法,用props传递给子组件,然后子组件调用这个方法,父组件便可以收到子组件传递的信息。父组件传信息给子组件可以直接用props,非常方便,但注意不能改变props中的值。
做完这一次的一个案例,我对vue的框架结构,以后做一个案例的步骤等都有了更进一步的理解,虽然消耗时间很长,但我觉得非常值得。
这是案例的展示。
2021.08.05 星期四
早上先将昨天的小案例总结了一下,从头到尾回顾了一下。
1、接着学习了localstoarge(浏览器本地存储),它可以把数据存储在浏览器本地中,且不会因为浏览器关闭而消失,在昨天写的案例中可以运用本地存储,将数据存储在本地中。2、然后又详细学习了自定义事件,在子传父数据的时候用自定义事件更加方便灵活:在子组件上绑定一个事件,在子组件上面用emit触发该事件便可以传数据给父组件了。自定义事件还可以进行解绑,$off便可以解绑。对于昨天的案例,可以利用自定义事件进行完善更改。3、兄弟之间,即任意两个组件之间的通信可以通过一个全局事件总线,在每个组件都可以用到的地方(即可以是vue的原型)注册一下,然后在一个组件上绑定一个事件,在另一个需要传数据的组件里触发该事件便可以完成通信。晚上看教学大致了解了数据结构,它就是选择一个最优,效率最高的方式来解决问题,就不定非要去死记一些规则。今天就是大概了解了一些概念,感觉还好,明天继续学习。
总结组件之间通信共有三种方式,props传值用于父传子,自定义事件可用于子传父,兄弟之间的通信可以用全局事件总线来进行传递,在学习完这三种后,自己有点被绕进去了,在慢慢梳理之后,才逐渐清晰。
2021.08.06 星期五
今天打算将之前小案例再增加一个编辑功能,在写的时候遇到了些问题,是由于set不熟悉导致,于是回头去看了检测和set相关的一些内容。
当我写编辑小功能的时候还是按照之前的步骤来:先将展示的样式给写完,再将一些监听事件给填写完成,用blur来确认修改的值:当失去焦点时,便可以确认修改的值;然后再和其他组件进行通信(采用的全局总线的方式),将功能完成,最后再进行了一些完善,将一些小bug给修复,其中学习到一个新的api nextTick,它可以在下一次模板解析好之后,再执行它里面的回调函数,它可以用在点完编辑按钮之后,输入框可以自动获得焦点。
然后又学习了vue的动画效果,但由于css样式不是很会,所以计划每天还要去看css样式。首先先快速的将html相关知识都过了一遍。然后学习css,弥补一些不足的地方。
下周计划继续学习vue的同时,将css样式按照教学全部过完,并争取能够熟练使用。