(vue)项目实践

黑胡子大叔的小屋

已于 2024-01-18 08:46:31 修改

阅读量2.9k

点赞数 1

分类专栏：前端文章标签： vue.js 前端 javascript

于 2020-11-24 17:35:30 首次发布

本文链接：https://blog.csdn.net/lzl980111/article/details/110087060

版权

前端专栏收录该内容

75 篇文章 0 订阅

订阅专栏

小记

终于可以进入实践阶段了

笔记

项目构建

在这里插入图片描述

项目别名

完成项目构架后，对项目别名，要不后面改的东西太多
在这里插入图片描述
后续的使用如下：
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

传递实参

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

黑胡子大叔的小屋

关注

1
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
(vue)项目实践

项目实践小记笔记项目构建项目别名网络请求封装配置路由\构建视图正式开发组件拆分组件一组件二点击切换li标签颜色的实现组件三小记终于可以进入实践阶段了笔记项目构建项目别名完成项目构架后，对项目别名，要不后面改的东西太多后续的使用如下：js中：html中：~别名css中：网络请求封装其中网络模块进行了进一步的封装基础的网络请求封装在request.js中import axios from 'axios'export function request(config){
复制链接

扫一扫