Vue实现移动端开屏广告+滑动登录(2)

• 

• 

• 这个就是这个小Demo，我想表达的是Demo虽小，五脏俱全，很多知识点之前以为懂了，现在才知道都不懂，之前用原生JS做过pc端的滑动登录，现在用Vue.js做移动端的以为很简单，才发现事情没有想象的那么简单，移动端的滑动事件和pc端的事件并不是同一个事件，以至于我一直没有做成功

• CSS知识点：

• Dom.offsetWidth之的是原生自身的宽度，是包含边框的 但是不包含边距

• user-select: none; 是让文本不能够被选中

• CSS没有啥太大的知识点，只要花时间都能够写出来，就是一个有时候我们想让伪类元素像::before这种伪元素居中我们可以给伪元素的宿主元素设置弹性布局

• Vue.js部分：

• mounted生命周期函数和created生命周期函数的区别，mounted表示的是页面已经渲染好了 created表示的是页面还没有渲染好，这两个经常使用

• 开屏广告部分时间在跳转就使用setInterval（）而没有使用setTimerOut了，因为前者可以一直使用反复的执行，而后者需要不断的调用，更加的不方便。

• 在Vue中我们如果想要修改一些元素的样式，可以使用ref引用的方式，这个就是虚拟Dom，因为Vue就是不愿意让我们使用dom元素，所以我们可以给元素设置ref属性，在JS里面再使用this.$refs.ref名来获取到这个元素，惊醒一系列你想要做的操作

• 移动端滑动登录

• 在PC端中我们是使用onmousemove onmousedowm onmouseup来实现拖动，因为移动端时没有鼠标的，所以含有mouse的事件都不能使用，相对应的也就改成了touchstar touchmove touchup

• 因为Vue中有data属性记录值，所以我们可以多多的使用falg这种值来判断是否成功，像v-if来绑定这些flag，就可以实现满足某些内容再惊醒页面内容的更替。

• 

• 数学问题：什么时候时拖动到重点：拖动的距离（滑块移动的距离）= 容器宽度-滑块的宽度。换成代码就是movex > (this. r e f s . f a t h e r . o f f s e t W i d t h − t h i s . refs.father.offsetWidth - this. refs.father.offsetWidth−this.refs.boxs.offsetWidth

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】