脚本宝典收集整理的这篇文章主要介绍了

vue+node全栈移动商城【8】-vant新建注册页面

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

上一节咱们已经实现了注册页面的跳转,那么在这一节,咱们全用vant这个框架,把注册页面给完善起来。让它能够拥有基本的页面交互功能。
为下一步的登录、注册做好准备。


这是
vant官网

在左侧的导航里,向下滚动到,
NavBar 导航栏

先看【使用指南】把下面的代码加入到main.js中

import { NavBar } from 'vant';
Vue.use(NavBar);

然后根据我们的需要,在register.vue文件中的template中,加入以下代码,

<van-nav-bar
            :title=msg
            left-text="返回"
            left-arrow
            @click-left="goBackFn"
            />

在register.vue文件中的script中,加入以下代码,

data(){
        return {
            msg:'注册页面',

            username:'',
            password:'',
            password2:'',

            userErr:'用户名不能为空',
            passErr:'密码不能为空'
        }
    },

methods:{
    // 回到上一步
    goBackFn(){
        this.$router.go(-1);
    }
}

现在你应该能够看到一个导航条,并且你点击返回的时候,能够返回到上一页。


接下来,咱们使用【Field 输入框】来实现用户输入的部分,
点击:Field 输入框
查看文档的使用指南,把下面的代码,加入到main.js中,

import { Field } from 'vant';
Vue.use(Field);

我们使用Field的自定义类型,在register.vue文件中的template区域中,加入以下代码,

<van-field
    v-model="username"
    required
    clearable
    label="用户名"
    placeholder="请输入用户名"
    @click-icon="username=''"
    :error-message="userErr"
    />

<van-field
    v-model="password"
    type="password"
    required
    clearable
    label="密码"
    placeholder="请输入密码"
    @click-icon="username=''"
    :error-message="passErr"
    />

<van-field
    v-model="password2"
    type="password"
    required
    clearable
    label="重复密码"
    placeholder="请重复输入密码"
    @click-icon="username=''"
    :error-message="passErr"
    />

在script区域中加入以下代码,

data(){
    return {
        msg:'注册页面',

        username:'',
        password:'',
        password2:'',

        userErr:'用户名不能为空',
        passErr:'密码不能为空'
    }
}

这时,我们的register.vue注册页面,虽然还没有添加相应的js方法,但就页面来讲已经初步完成。


更快观看 更多教程内容,请扫下方二维码,关注微信公众号:web前端教室,谢谢。 更有前端学习群,让你组团学习,更快进步。

总结

以上是脚本宝典为你收集整理的

vue+node全栈移动商城【8】-vant新建注册页面

全部内容,希望文章能够帮你解决

vue+node全栈移动商城【8】-vant新建注册页面

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过