统一简化样式

规定在app.vue里,输入框包含前缀样式,根据需要对元素加入类名。

HTML结构通过功能分区

v-model

是lhs规则,不能v-model=”val || 0”

子组件props

子组件props可以规定,什么类型,是否必须要,validator验证是否符合某种规则,default默认值。

图片拖拽:

记录要动未动时的目标位置,鼠标位置,定义动画函数为箭头函数(方便获取this),记录下一帧的鼠标位置,与最初的鼠标位置差,新的目标位置=要动未动时目标位置 + 差*比例,用到requestAnimationFrame全局函数,浏览器每隔一秒会刷新图像60次,16.7ms会刷新一次,而视觉上,我们看到是静止的或者突变的画面。动画就是要让变化显示出来的视觉效果。animate函数定义图片属性在一定条件范围下怎样变动,requestAnimationFrame递归执行animate

图片尺寸调整:

分为上下左右四边和一个角可以拉伸,在结构和样式上:每个canvas都是绝对定位,宽高绑定图片宽高,拉伸的框宽高绑定图片宽高,包含四个拉伸的点通过绝对定位,和一个角拉伸的点,通过定位和动态绑定样式,图片单独一个绝对定位img标签,宽高100%

动画:

屏幕分为CRT屏和LCD屏,CRT屏幕上图像是电子束击打荧光粉发光显示的,会有闪烁现象。LCD液晶显示屏,是一直发光的,系统每隔大概16.7ms刷新图像;

requestAnimationFrame:

requestAnimationFrameAPI,会跟随系统刷新显示,不会出现跳帧,卡顿情况,

定时器:

setTimeout也可以,但是setTimeout执行时间是不确定的,animate会被放在任务队列中,等待主线程空闲了,再执行。setTimeout只能规定时间,但各种系统刷新图像的时间是不确定的,有可能执行了animate但是并没有刷新图像。

使用requestAnimationFrame而不用定时器原因:
  1. 根据系统刷新时间执行animate,不会跳帧,漏帧
  2. setTimeout会在动画页面尺寸调整或者跳转其他页面时,任然执行动画,动画任务被堆积,当页面跳回来时,会急速闪过所有堆积的animate,没有意义,消耗资源。
  3. setTimeout的动画如果快过系统刷新图像,会漏帧。
    vue使用相关:
  4. computed里可以创造data里的属性,并设置get和set,每次读写直接触发emit,改变父组件。
  5. 有时候时间不起作用,可能是冒泡的事。@click.stop.prevent事件修饰符。
  6. 用v-show代替v-if给频繁替换的元素。v-if值为false不会挂载到dom树,页面中没有这个元素。v-show是仅仅元素css设置为display:none,元素挂载到dom树,只是render树因为css树上属性所以不挂载。参考segmentfault 文档解析原理
  7. 文字多余打点,css实现和js实现
  8. 模拟编辑器的比例问题:
    目标的位置,由margin-top、margin-left显示,值 =((目标的x、y坐标值)/ 整个layer图层的宽) 一个定值45;统一比例 = 整个layer图层的宽 / 整个视口的宽 45%;实际animate更改目标属性x、y坐标,值 = 原来的坐标位置 + 鼠标移动的距离差值 统一比例;目标的宽高 =(目标的宽高 / 整个layer图层的宽) 一个定值,实际animate更改宽高属性,值 = 原来的宽高值 + 鼠标移动的距离差值 * 统一比例
    45%对应canvas的宽是45vw;
  9. 模板列表排布动态样式:hover时,缓慢突出,并加阴影:布局的基础上,包含框position:relative站位,bottom:0,transition:all 时间;hover包含框时,bottom:10px;增加shadow。
    vue组件名字的作用:
  10. 自己调用自已可以用名字
  11. keep-alive里,切换路由router-view,缓存了状态,需要更新又得不到更新,可以用exclude属性,值为过滤的组件名字。
  12. vue的dev-tools里,组件名字显示结构