小记

终于可以进入实践阶段了

笔记

项目构建

在这里插入图片描述

项目别名

完成项目构架后,对项目别名,要不后面改的东西太多
在这里插入图片描述
后续的使用如下:
js中:
在这里插入图片描述
html中:
在这里插入图片描述

~别名

css中:
在这里插入图片描述

网络请求封装

其中网络模块进行了进一步的封装

在这里插入图片描述
基础的网络请求封装在request.js中

import axios from 'axios'
export function request(config){
    const instance=axios.create({
        baseURL:"http://123.207.32.32:8000"
    })
    return instance(config)
}

对于每个视图的网络请求进行抽离,比如home视图封装在home.js中

import {request} from 'network/request'
export function getHomeMutidata(){
    return request({
        url:'/home/multidata'
    })
}

网络请求的使用(此时的使用场景是首页加载 时加载 轮播图的数据)
在这里插入图片描述

配置路由\构建视图

在这里插入图片描述
对每个视图下建立childComps用来存放当前视图的子组件
在这里插入图片描述

正式开发

从首页开始,今天开发的效果图如下:
在这里插入图片描述

组件拆分
组件一

进行组件拆分
上面的首页在不同视图之间是可以复用的
在这里插入图片描述
三个部分的内容是不相同的

  • 第一部分有时会添加一个返回按钮
  • 第二部分展示不同的标题
  • 第三部分有时会添加一个菜单按钮

使用三个插槽填充三个部分 若三部分只是字符上的区别就不用使用插槽了,下面紧接标题不同的例子,先把这个梳理完

由于这个组件是会在不同页面上使用的,我们把它放在

src/components/common


NavBar.vue:

<template>
    <div class="nav-bar" id="nav-bar">
        <div class="left">
            <slot name="left"></slot>
        </div>
        <div class="center">
            <slot name="center"></slot>
        </div>
        <div class="right">
            <slot name="right"></slot>
        </div>
    </div>
</template>
<script>
export default {
    name:"NavBar"
}
</script>
<style scoped>
    .nav-bar{
        display: flex;
        line-height: 44px;
        height: 44px;
        color: white;
    }
    .left, .right{
        width: 50px;
        background-color: rgb(253, 139, 219);
    }
    .center{
        flex:1;
        background-color: rgb(253, 139, 219);
    }
</style>

使用(当然是在home.vue中使用):
在这里插入图片描述

组件二

我们先跳过中间的直接看这个
在这里插入图片描述
点击不同的标题将其底部和字体变换颜色,下方显示相应的信息(下方显示信息还没实现)
照应前面,这个仅仅是标题变了,不是控件发生改变,此时我们不适用插槽;实现如下(当然这个组件在很多页面都会用到,放哪就不用多说了吧,没想清楚的看下项目构建图示

tolcontrol.vue:

<template>
    <div class="tabcontrol">
        <div v-for="(item,index) in titles" :key="index" :class="{active:index===currentIndex}" class="tabcontrol-item" @click="currentIndex=index">{{item}} </div>
    </div>
</template>
<script>
export default {
    name:"tabcontrol",
    props:{
        titles:{
            type:Array,
            default(){
                return []
            }
        }
    },
    data(){
        return{
            currentIndex:0
        }
    }
}
</script>
<style>
    .tabcontrol{
        display: flex;
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
    .tabcontrol-item{
        flex:1;

    }
    .active{
        border-bottom: 3px solid rgb(211, 96, 186);
    }
</style>

这里重新梳理一下点击切换li标签颜色的实现

点击切换li标签颜色的实现
  • 定义一个变量currentIndex用来存储当前是哪个li标签处于活跃状态
  • 监听点击事件修改currentIndex为当前点击的li标签
  • 每个li标签设置动态class
:class="{active:index===currentIndex}"
  • 写active样式
组件三

在这里插入图片描述
这里有一个轮播图的使用
我在这里引入了element-ui插件
插件的引入

npm install element-ui --save

在这里插入图片描述
我同样将其封装成组件,减少home.vue中的代码量,同时也方便管理
由于这个组件只在home.vue中用到,所以将其封装在views/home目录下,下面几个组件是相同的道理
在这里插入图片描述
组件代码:

<template>
    <div>
        <el-carousel height="200px">
            <el-carousel-item v-for="banner in banners" :key="banner.image">
                <div style="height:200px">
                    <a :href="banner.link">
                        <img :src="banner.image" style="height:100%"/>
                    </a>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script>
export default {
    name:"carousel",
    props:{
        banners:{
            type:Array,
            default(){
                return []
            }
        }
    }
}
</script>
父子组件传值

注意到这里使用到了父子组件传值,关键词props
在home.vue中的使用:在这里插入图片描述
子组件向父组件传值,关键词 $emit
子组件中的代码段:
在这里插入图片描述
父组件中的接收处理:
在这里插入图片描述
在这里插入图片描述

组件的监听点击方法

在这里插入图片描述
组件是无法像原生标签一样直接@click的,需要加上.native属性才可以

vue中获取组件、元素尽量使用ref属性

在vue中当然可以通过:

document.querySelector('.wrapper')

获取元素;但是若父组件中同样使用到了 class =" wrapper ",这时可能就会出错,在vue中我们推荐使用

<template>
<!-- 
     ref若绑定在组件上,拿到的就是组件
     ref绑定在元素上,则拿到的是元素
     在vue中尽量使用ref获取指定元素
     而不要使用 querySelector 这种方法
 -->
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
    name:'scroll',
    data(){
        return{
            scroll:null
        }
    },
    mounted(){
        // this.scroll=new BScroll(document.querySelector('.wrapper'))
        this.scroll=new BScroll(this.$refs.wrapper,{
            probeType:3,
            pullUpLoad:true,
            click:true
        })
        this.scroll.on('scroll',(position)=>{
            console.log(position);
        })
    }
}
</script>

推荐使用

this.$refs.ref的值

的方式获取元素或组件

封装better-scroll
<template>
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
    name:'scroll',
    data(){
        return{
            scroll:null
        }
    },
    mounted(){
        // this.scroll=new BScroll(document.querySelector('.wrapper'))
        /*
                ref若绑定在组件上,拿到的就是组件
                ref绑定在元素上,则拿到的是元素
                在vue中尽量使用ref获取指定元素
                而不要使用 querySelector 这种方法
        */ 
        this.scroll=new BScroll(this.$refs.wrapper,{
            probeType:3,
            pullUpLoad:true,
            click:true
        })
        this.scroll.on('scroll',(position)=>{
            console.log(position);
        })
    }
}
</script>
<style>
    .wrapper{
        overflow: hidden;
    }
</style>
css中的vh和vw

vh和vw是视口单位
参考https://www.cnblogs.com/luxiaoxing/p/7544375.html

实现模拟淘宝的样式

在这里插入图片描述
顶部title栏和下方路由栏固定,中间可滑动展示样式的两种实现

  • 实现一

固定整体的样式为

	height: 100vh;
    overflow: hidden;

不明白vh单位的可以去看上面,上面有解释
这里所说的整体是
在这里插入图片描述
然后设置滑动部分的样式为:

height: calc(100% - 93px);

里面的93px是title栏+路由栏的高度

  • 实现二

滑动部分设置样式为绝对布局

        position: absolute;
        top: 44px;
        bottom: 49px;
        left:0px;
        right:0px;
        overflow:hidden;

在做回到顶部按钮时,给回到顶部按钮设置为fiexd布局

        position: fixed;
        bottom: 50px;
        right: 5px;

在这里插入图片描述

事件总线

不仅可以通过Vuex实现组件与组件(不限于父子组件)之间传递状态属性,还可以通过事件总线来实现组件之间传值。
关键词:

$bus.$on					//接收
$bus.$emit					//发送

示例:

  • 首先声明$bus
    在这里插入图片描述

  • 发送

	this.$bus.$emit('GoodLoad')
  • 接收
	this.$bus.$on('GoodLoad',()=>{
		//处理函数
	})
修订Better-Scroll不能滑动到底部的bug

bug分析
由于首页中存在异步请求的数据,而Better-Scroll只做了一次渲染;在异步请求的数据还没取到且没渲染时,Better-Scroll已经确定了高度属性
在这里插入图片描述
我们需要在异步请求完成,dom渲染完成后对Better-Scroll进行一次重新渲染。

项目分析

在这里插入图片描述在这里插入图片描述
现在需要在goodlist和carousl的dom加载完成后刷新Batter-Scroll的高度。
使用updated生命周期钩子,解析如下
在这里插入图片描述

需要在goodlist、carousl中触发,在home中响应,二者不是父子组件的关系,可以通过事件总线或Vuex实现

组件四

在这里插入图片描述
路由如何传递:

tarbaritem

从tarbarenity中接收到图标和【主页】和路由信息’/home’

获取当前路由路径看是否匹配,匹配则展示active状态,否则展示unactive状态

tarbar

大盒子

tarbarenity

传递实参

大学生资料站,一个面向大学生的资源共享平台

Logo

前往低代码交流专区

更多推荐