Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇撑着下班前半小时我用vue写《哔哩哔哩项目》移动端、新手还在哭、老鸟一直在笑。。。技术选型Vue2,技术栈有axios、Vh等,下班过来敲哈哈

大家好,又见面了,我是你们的朋友全栈君。

目录

前言完 

效果图 :

登录含签权 

 注册带正则

 个人中心

 下拉加载更多主页

 修改个人中心

 视频播放加关注+收藏

评论盖楼A回复B B回复C C回复A类似 

项目开始 

 封装登录、注册

 封装登录


      从零到一开发一个 哔哩哔哩移动端App 包括后面的打包成包安装到手机上 

      亲测熟练操作掌握,技能会更上一阶,生活不是林黛玉,不会因为忧伤而风情万种,运气就是,机会正好碰上了你的努力。加油干  

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇前期回顾    Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇 

十五万字的后台管理系统项目 包括从零搭建到结束自己写服务器上线结合 服务器+后端+前端,完成 vue项目 后台管理系统_0.活在风浪里的博客-CSDN博客亲测可用 gitee 网址 包括php包,后端node.js代码,前端源码 以及文档接口说明 + 结合 服务器+后端+前端,完成 vue项目 后台管理系统Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇https://blog.csdn.net/m0_57904695/article/details/122648464

在项目中会大量使用复用组件的形式来开发,也能更好的与真实企业级项目接轨,更加减少我们的冗余代码,提高可读效率(除自己以外的开发人员) 

前言完 

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

效果图 :

登录含签权 

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

 注册带正则

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

 个人中心

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

 下拉加载更多主页

 Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

 修改个人中心

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

 视频播放加关注+收藏

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

评论盖楼A回复B B回复C C回复A类似 

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

 功能很多就不一一展示介绍,直接进入开发

项目开始 

在一开始会配置路径别名、封装好axios、rem等,写移动端rem适配,肯定要做好,这里我单独写了多种设配,极简易懂站在逆向思维去写的, 希望可以帮助到大家移动端设配 rem vw_0.活在风浪里的博客-CSDN博客由于使用vw、vh依赖于视图窗口,故当屏幕分辨率变大或者缩小,尺寸会进行相应的放大或者缩小,当页面足够大,或者足够小时,尺寸会变得很大或者很小,从而导致用户体验差,当然谁会用那么大或者那么小的设备呢?大多数情况下,其实可以忽略不计的,如果你是一个最求完美用户体验的人,可通过rem,对根元素设置最大最小值,配合body加上最大宽度和最小宽度Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇https://blog.csdn.net/m0_57904695/article/details/122249803?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164804337816780271590085%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164804337816780271590085&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-122249803.nonecase&utm_term=rem&spm=1018.2226.3001.4450

 Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

 封装登录、注册

因为它们很雷同,所以父传子给不同的值 Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

 封装登录

 位置:父组件

在父组件写好传的数据,子组件来接收

<template>
  <div id="">
    <div class="loginTop">
      <!-- 父组件通过自定义属性传值,如果是字符串可以不加 : -->
      <!-- 如果在data中定义成变量,等号左边属性要加: -->
      <login-top middleTop="注册哔哩哔哩"></login-top>

      <my-input-label
        placeholder="请输入姓名"
        label="姓名"
        rule="^.{6,16}$"
        style="margin: 15px 0"
        @changeInput="(res) => (uname = res)"
      ></my-input-label>

      <my-input-label
        placeholder="请输入手机号"
        label="账号"
        rule="^.{6,16}$"
        @changeInput="(res) => (phone = res)"
      ></my-input-label>
      <!-- 
        @changeInput="res=>password=res"
        这种是简写了
        完整写法:
        @changeInput="changeInput"
        changeInput(val){
          this.uname =val
          this.phone =val
          this.password =val
        }
      -->
      <my-input-label
        placeholder="请输入密码"
        label="密码"
        type="password"
        rule="^.{6,16}$"
        @changeInput="(res) => (password = res)"
      ></my-input-label>
    </div>
  </div>
</template>

<script>
import LoginTop from "../../components/LoginCon/MyLoginTop.vue";
import MyInputLabel from "../../components/LoginCon/MyInputLabel.vue";

export default {
  name: "",
  data() {
    return {
      uname: "",
      phone: "",
      password: "",
    };
  },
  methods: {
   
  },

  computed: {},
  components: {
    LoginTop,
    MyInputLabel,
  },
  created() {},
};
</script>

<style lang="scss" scoped>
//@import '引入的css文件';
</style>

 父组件写不同的值传到子组件,子组件负责接受,子组件用来定义结构样式,父组件负责传值

即封装思路,

念及此:


位置:子组件

这是顶部文字《哔哔哩哩》的子组件,input单独一会新建文件夹在封装

<template>
  <div id="">
    <div class="loginTop">
        <div></div>
        <div>{
  
  {middleTop}}</div>
        <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name:'',
  data() {
    return {};
  },
  props:['middleTop'],
  methods: {},
  
  computed: {
   
  },
  components: {},
  created() {},
};
</script>


<style lang="scss" scoped >
//@import '引入的css文件';
.loginTop{
  width: 100%;
  height: 70px;
  background-color: #ffff;
  color: #000000;
  font-size: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 33.3%;
  padding: 0 15px;
}
</style>

总结一下过程,以图片形式,如下 

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇  Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

 Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

顶部文字封装完毕! 

下面封装 input

位置:子组件

这是顶部 《账号 密码》的子组件,input单独在封装不与顶部文字写在一起,样式结构不一样

<template>
  <div id="">
    <div class="myInputlabel">
      <van-cell-group>
        <van-field
          v-model="value"
          :label="label"
          :placeholder="placeholder"
          :type="type"
          :rule="rule"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      value: "",
    };
  },
  props: ["placeholder", "label", "type", "rule"],
  watch: {
    value: {
      handler(newVal, oldVal) {
          this.regEv()
      },
    },
  },
  methods: {
    regEv(){
      // 因为传过来的是字符串所以要将字符串变成真正的正则
      const reg = new RegExp(this.rule)
      // console.log(reg.test(this.value)); //false
      if(reg.test(this.value)){
        this.$emit('changeInput', this.value)
      }
      
    }
  },
};
</script>

<style lang="scss" scoped>
//@import '引入的css文件';
.loginTop {
  width: 100%;
  height: 50px;
  background-color: #ffff;
  color: #000000;
  font-size: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 33.3%;
  padding: 0 15px;
}
</style>

总结一下过程,以图片形式,如下

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇  

复制Vant的van-field组件写在子组件,在父组件引入子组件,涉及到密码不同type,不同placeholder,还有正则,label不同文字,

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

在父组件将需要的东西定义好,发送到子组件

 Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇       这里推荐两篇博文props接收值得说明,当然了官方更加全,建议去撸一遍Vue 组件通讯 props接受形式有哪些_0.活在风浪里的博客-CSDN博客_vueprops接收数据的方式props对象接收的值怎么使用通过对象的方式定义props成员,可以为每个prop成员制定规则(类型,校验…),常用的如下.父传子props接受的形式Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇https://blog.csdn.net/m0_57904695/article/details/121661892?spm=1001.2014.3001.5501

Vue组件通讯_0.活在风浪里的博客-CSDN博客_vue父子传值Vue2 父子传值的 6 种方法Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇https://blog.csdn.net/m0_57904695/article/details/121723392?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164812465916780274173611%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164812465916780274173611&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-121723392.nonecase&utm_term=%E9%80%9A%E8%AE%AF&spm=1018.2226.3001.4450
Vue3封装input组件_0.活在风浪里的博客-CSDN博客_vue3 封装input第一步在components文件夹中 创建一个myInput.vue文件<template> <div> <input type=”text” :value=”modelValue” @input=”iptChange”> </div> </template><script>import { ref } from ‘vue’export default { props: {
Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇https://blog.csdn.net/m0_57904695/article/details/121627922?spm=1001.2014.3001.5501

 wacth监听input的值,如果正则匹配正确,则触发子传父事件,也就是,你在父组件页面的子组件input框上输入的值,会在子组件判断正则,匹配则发送父组件,父组件接受到后就可以通过判断下一步是否登录等操作

 Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

 变成true就是判断成功 

 传值后也就引出了上面父组件写的值了,这是一开始上面的图片

 Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

 看下我们封装的效果可以实现不

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

 接下来写注册,接着就是个人页

Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 30秒学会 —— 《获取验证码基本操作》_0.活在风浪里的博客-CSDN博客前期回顾 懒人必备 —— 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用,及其好使的插件,开发懒人必整,就算是自己可以写,一大堆代码,真的要写吗?https://blog.csdn.net/m0_57904695/article/details/123767269?spm=1001.2014.3001.5501先说先验证码思路,其实很简单,1、前端触发获取验证码,同步显示有效验证倒计时;2、后…Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇https://blog.csdn.net/m0_57904695/article/details/123881330?spm=1001.2014.3001.5502

更新中。。。

2022/6/14 18:30

      因为我呢白天要上班,晚上回来还要看电子书,额不是,回来还得读 js 源码,所以无法一下子写完,白天也挺累了,晚上因为爱好我喜欢记录,边敲边记录,还挺忙,所以会每天下班都来写,如果对你有微乎帮助,请点个收藏以备找时方便

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152715.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • java static 存在哪里_java中的静态变量和Class对象究竟存放在哪个区域?「建议收藏」

    java static 存在哪里_java中的静态变量和Class对象究竟存放在哪个区域?「建议收藏」JDK7的官方解释:CurrentlystaticfieldsarestoredintheinstanceKlassbutwhenthosearemovedintonativememorywe’dhavetohaveanewcardmarkstrategyforstaticfields.Thiscouldbesomethinglik…

  • Mac 下 JAVA 环境变量的配置

    Mac 下 JAVA 环境变量的配置1.先点击划红线的这个【小火箭】2.打开你会看到有【其他】这一个栏目,点击打开。3.打开后,你会看到这个【终端】,然后点击4.会呈现出这样的界面当然你别管是什么,紧接着第5步。 5.输入这条命令行【/usr/libexec/java_home-V】查看默认的jdk下载地址注意:命令行终端是区分大小写的(-v是不对的,必须是大写-V)…

  • Python – 数据类型之字符串、数字

    Python – 数据类型之字符串、数字数据类型之字符串、数字

  • 女生学java_Java Server Pages

    女生学java_Java Server Pages/*身份证号码的结构和表示形式<br>1、号码的结构<br>公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成。排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码。<br>2、地址码<br>表示编码对象常住户口所在县(市、旗、区)的行政区划代码,按GB/T2260的规定执行。<br>3、出生日期码&

  • Java中的构造方法[通俗易懂]

    Java中的构造方法[通俗易懂]简述前言:【08-10】构造方法   定义:就是类构造对象时调用的方法,主要用来实例化对象。构造方法分为无参构造方法、有参构造方法。   概念:构方法是一种特殊的“成员方法”     1,构造方法作用:(1)构造出来一个类的实例(2)对构造出来个一个类的实例(对象)初始化     2,构造方法的名字必须与定义他的类名完全相同,没有返回类型,甚至连void也没有 …

  • 比特每秒bps,2Mbps=256kbit下载速度转换算法。

    比特每秒bps,2Mbps=256kbit下载速度转换算法。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号