上一节咱们已经实现了注册页面的跳转,那么在这一节,咱们全用vant这个框架,把注册页面给完善起来。让它能够拥有基本的页面交互功能。 为下一步的登录、注册做好准备。
这是
,在左侧的导航里,向下滚动到,
先看【使用指南】把下面的代码加入到main.js中
import { NavBar } from 'vant';Vue.use(NavBar);
然后根据我们的需要,在register.vue文件中的template中,加入以下代码,
在register.vue文件中的script中,加入以下代码,
data(){ return { msg:'注册页面', username:'', password:'', password2:'', userErr:'用户名不能为空', passErr:'密码不能为空' } },
methods:{ // 回到上一步 goBackFn(){ this.$router.go(-1); }}
现在你应该能够看到一个导航条,并且你点击返回的时候,能够返回到上一页。
接下来,咱们使用【Field 输入框】来实现用户输入的部分, 点击: , 查看文档的使用指南,把下面的代码,加入到main.js中,
import { Field } from 'vant';Vue.use(Field);
我们使用Field的自定义类型,在register.vue文件中的template区域中,加入以下代码,
在script区域中加入以下代码,
data(){ return { msg:'注册页面', username:'', password:'', password2:'', userErr:'用户名不能为空', passErr:'密码不能为空' }}
这时,我们的register.vue注册页面,虽然还没有添加相应的js方法,但就页面来讲已经初步完成。
更快观看 更多教程内容,请扫下方二维码,关注微信公众号:web前端教室,谢谢。 更有前端学习群,让你组团学习,更快进步。