注册带正则
个人中心
下拉加载更多主页
修改个人中心
视频播放加关注+收藏
评论盖楼A回复B B回复C C回复A类似
功能很多就不一一展示介绍,直接进入开发
项目开始
=====
封装登录、注册
因为它们很雷同,所以父传子给不同的值
封装登录
位置:父组件
在父组件写好传的数据,子组件来接收
<my-input-label
placeholder=“请输入姓名”
label=“姓名”
rule=“^.{6,16}$”
style=“margin: 15px 0”
@changeInput=“(res) => (uname = res)”
<my-input-label
placeholder=“请输入手机号”
label=“账号”
rule=“^.{6,16}$”
@changeInput=“(res) => (phone = res)”
<my-input-label
placeholder=“请输入密码”
l 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 abel=“密码”
type=“password”
rule=“^.{6,16}$”
@changeInput=“(res) => (password = res)”
父组件写不同的值传到子组件,子组件负责接受,子组件用来定义结构样式,父组件负责传值
即封装思路,
念及此:
位置:子组件
这是顶部文字《哔哔哩哩》的子组件,input单独一会新建文件夹在封装
总结一下过程,以图片形式,如下
顶部文字封装完毕!
下面封装 input
位置:子组件
这是顶部 《账号 密码》的子组件,input单独在封装不与顶部文字写在一起,样式结构不一样
<van-field
v-model=“value”
:label=“label”
:placeholder=“placeholder”
:type=“type”
:rule=“rule”
ge/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16)
顶部文字封装完毕!
下面封装 input
位置:子组件
这是顶部 《账号 密码》的子组件,input单独在封装不与顶部文字写在一起,样式结构不一样
<van-field
v-model=“value”
:label=“label”
:placeholder=“placeholder”
:type=“type”
:rule=“rule”