这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战。恰逢掘金八月更文挑战，今天向大家分享一些使用 Vue 实现简单的用户登录页面，希望这个小 demo 能够给初学 Vue 的小伙伴一点小启发，帮助大家更好地去理解数据绑定以及对象的深度监控。加油，共勉！

用户名和密码字段必填，如果未填写指定字段点击登录按钮后，立马弹出提醒信息，当按下字段不为空时，提示信息立马消失，当两个字段都填写完成即可提交用户名和密码到后端进行验证身份信息，验证成功成功进入，否则无法进入，此外还有登录页面附带注册用户入口。

整体页面样式以及一些输入框和按钮的样式

Vue 代码中定义了一个用户登录对象以及给用户的提醒信息，定义了两个方法，一个方法是做表单的非空判断的，一旦验证不通过立马展示提示消息，将函数返回，否则做完表单验证后，使用 Ajax 将数据异步提交前台数据到后端去验证该用户的用户名和密码是否匹配；另一个方法是点击按钮进行跳转到注册页面用的。

注意： 由于 Ajax 块放在 Vue 对象的 methods 属性中，又因为异步提交数据，无法修改 Vue 内部属性，这里有两个办法，第一方法就是通过一个外部方法来处理请求后处理结果；还有一个方法就是将 Ajax 的异步加载改为同步加载即 sync:false。

开启 Vue.js 中 watch( deep 深度监听 )

这里 deep 的意思是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改 obj 里面任何一个属性都会触发这个监听器里的 handler 函数。

handler 函数处理逻辑很简单，就是当有提醒信息时，一旦用户登录对象中的属性别修改触发了，就将 msg 置为 null ，即完成了用户看到提示信息后一修改就屏蔽红字了，是不是很简单呢？！

撰文不易，欢迎大家点赞、评论，你的关注、点赞是我坚持的不懈动力，感谢大家能够看到这里！Peace & Love。