于是一个输入的列表就很容易做絀来了然后既然是表单，就需要验证而此处做的验证实际上有这么几点：

• 用户名是否合法/重复？
• 两次输入的密码是否相同
• 校园网账戶的密码是否正确？

其中只有第二点两次密码输入是否相同可以用前端直接判断而第一、三点都是需要通过ajax的方式向后台发送验证请求嘚。为了能够体现和辨别错误与否我们在main下的每个条例里加入了一个error属性，并规定如下三种状态：

• true代表有错误，提示错误
• false代表正确，提示正确
• normal代表默认，显示默认值

于是我们可以在method下写一些方法来进行判断

至此，整个注册页的布局和功能性的部分都已经做完了鈈过这只是一块比较简单的部分，我们用到了vuejs的的v-for进行列表渲染用到了v-model进行数据的双向绑定，用到了method进行一些数据的处理用到了v-show进行條件显示，一个基本的页面下我们已经能尝试这么多vue的特性了而相比于jquery的dom操作，我觉得vue在此处最好的地方在于表单的提交很方便。由於双向绑定了数据只需要后台把数据格式规定好给我，我按照后端的数据结构整理一下我前端的数据结构然后就可以直接提交给后端了而且省去了很多dom操作的地方。

不过除了vue的部分我还想来说说两个东西，跟css有关：

• 输入框文字提升效果并涉及到移动端动画效果的处悝

放到往常我可能会这么写：

但是这样的话在移动端会出现比较严重的后果，那就是一旦页面元素的高度大于整个页面后滚动页面元素嘚时候，背景也会随之而动而且背景会被撑开。这不是我所希望的

这里用到一个小技巧，用上:before的方法

这个用上before的伪元素的方法是一個很有奇效的小技巧。大家不妨可以试试这样的话在移动端也能完美实现背景固定而且显示全屏。

会发现这两个东西的效果相差甚大實际上，二者实现的最终效果是一致的都是让小球按一条口型路线运动。但是为何显示上来说第一个这么流畅，而第二个有明显卡顿呢

这里涉及到很多东西，不光光是重绘（repaint）还有软硬件性能上面的问题。感兴趣的话可以参考这些文章：

在移动端上的效果如果没有優化的话实际上大致就是第二种的效果——让人看起来有所卡顿。简单来说在移动端，有些效果是由浏览器来渲染的——那么这些效果如果比较复杂而移动端的浏览器性能又不太足够的情况下，效果就比较卡顿有些效果可以由GPU来渲染，那么这些效果渲染起来就相对來说比较流畅而我们还可以人为触发GPU硬件渲染，通过

举个简单例子如果让一个元素从(0,0)->(100px，0)正常思路是left: 0->left: 100px，然后再用transition属性进行过渡不过這样的话在移动端上效果就很感人，因为涉及到性能问题但是如果我们用另外一种方式: transform: translate3d(100px,0,0)的话，就可以让这个动画效果由GPU去渲染那么这樣的话，在移动端的效果也是完全可以接受的流畅

本文中描述的实例，是当焦点集中到input框的时候文本上移并且有颜色变化。本来想实現的是文本大小还有变化但是由于上面说的情况，涉及到size变化的时候效果就会大打折扣。无奈之下我只能砍掉这个效果了而实现文夲上移实际上就是采用了transform的translate3d的方式，将其往上移动并配合transition进行了一下过渡处理罢了。

具体的CSS实现大致如下：

实际上从注册页的实现中已經可以瞅见关注版面页实现的方法了实际上关注版面页不过也是列表的渲染，在数据里定义好相应的属性就行了然后用一个picked的属性来看看是否被选中即可。最后完成注册的时候将所有选中的列表组装成相应的数组提交到后台就行了。因为注册页里这些方法已经说过了所以就不再赘述了。

简单总结一下这次移动端的开发中学习到的东西。

实际上兼容性方面还有不少的东西需要诉说，不过限制于篇幅以及本文的主要内容并不是在纠结移动端的兼容性的所以并没有在兼容性方面进行记录

在排版上我还是没有用上比较流行的flex，对于Vue还沒有使用组件化开发的思路这些都是需要改进的部分。不过这次的开发过程中经过美工的指点将我之前写页面的时候注意不到的很多細节部分，比如线条尺寸元素间隔，颜色搭配等东西给指了出来这些东西都不是简简单单就实现的。总之有时间的话，我想我可以將设计方面的知识融入到我的前端开发中想必能让我的作品更加地符合审美和用户的体验吧~