VUE3.0学习系列随笔（七）：定义单个VUE页面的背景图

青旅半醒 2023-01-11 09:12 425阅读 0赞

### VUE3.0学习系列随笔（七）：定义单个VUE页面的背景图 ###

VUE属于单页面应用，如果直接采用CSS设置Body的背景图，会让造成所有的VUE页面都会被设置同一个背景图，因此需要采用另外的方式来设置单个页面的背景图，本文采用js动态设置单个VUE页面的背景图，整个效果如下图：  
![在这里插入图片描述][20210126162811111.gif]

#### 1、主要思路 ####

主要是利用VUE3.0的生命周期钩子函数`mounted()`和`beforeUnmount()`。`mounted()`是在实例被挂载后调用，`beforeUnmount()`是在在卸载组件实例之前调用。

1、进入VUE页面，执行mounted(),设置body背景图片
    2、离开VUE页面，执行beforeUnmount()，清除背景图片

**注意：** VUE3.0中卸载组件实例之前调用的函数是`beforeUnmount()`，而在VUE2.0中则是`beforeDestroy()`

#### 2、主要代码实现 ####

<template>
      <div></div>
    </template>
    
    <script> export default { name: 'Back', data () { return { loginBg: 'url(' + require('../assets/login.jpeg') + ')' } }, // 进入VUE时首先调用的钩子函数 mounted () { // 添加背景图片 document.body.style.backgroundSize = '100%' document.body.style.backgroundImage = this.loginBg }, // 离开VUE时调用的钩子函数 beforeUnmount () { // 清除背景图片 document.body.style.backgroundImage = '' } } </script>
    
    <style> </style>

[20210126162811111.gif]: /images/20221119/25fc8f64e6c84a97982fb08bc463815f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，425人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-element-admin—登录页面添加自定义背景

目录一、效果图二、操作步骤 1、准备图片 2、更改代码一、效果图初始效果： ![在这里插入图片描述][aed53

深碍√TFBOYSˉ_/ 2024年03月30日 13:35/ 0 赞/ 110 阅读

相关 vue 循环遍历背景图

//循环背景图获取index <template> <div id="app"> <div class='pic'

缺乏、安全感/ 2023年06月25日 04:35/ 0 赞/ 57 阅读

相关 vue初学习（七）——自定义指令

自定义指令是指当一些指令不够用的时候需要自己自定义一些指令来实现对应的功能自定义指令分为局部和全局的，和过滤器filter一样，局部的可以一次性定义多个指令，全局的实例化一

女爷i/ 2023年02月09日 14:28/ 0 赞/ 38 阅读

相关 VUE3.0学习系列随笔（七）：定义单个VUE页面的背景图

VUE3.0学习系列随笔（七）：定义单个VUE页面的背景图 VUE属于单页面应用，如果直接采用CSS设置Body的背景图，会让造成所有的VUE页面都会被设置同一个背景图，

青旅半醒/ 2023年01月11日 09:12/ 0 赞/ 426 阅读

相关 VUE3.0学习系列随笔（五）：自定义组件使用

VUE3.0学习系列随笔（五）：自定义组件使用 VUE2.0和VUE3.0虽然在工程目录结构上存在较大差异，但是具体的代码实现逻辑相同，本文所使用的自定义组件方法，同样适

Love The Way You Lie/ 2023年01月11日 01:15/ 0 赞/ 222 阅读

相关 VUE3.0学习系列随笔（二）：VUE3.0和VUE2.0工程结构对比

VUE3.0学习系列随笔（二）：VUE3.0和VUE2.0工程结构对比 VUE3.0相对于VUE2.0的提升，最显著的特点在于：文件目录结构的优化。 1、VUE2.0

﹏ヽ暗。殇╰゛Y/ 2023年01月09日 15:48/ 0 赞/ 118 阅读

相关 VUE3.0学习系列随笔（一）：VUE3.0项目初始化

VUE3.0学习系列随笔（一）：VUE3.0项目初始化 1、VUE3.0简介 VUE3.0相对于VUE2.0的提升主要有以下几点： Performance：

男娘i/ 2023年01月08日 14:26/ 0 赞/ 165 阅读

相关 Vue动态切换背景图

最近在改写一个网站，抽离公共组件的时候，发现一个nav组件图标是用background-image显示的。把基本的框架抽离出去，具体菜单项用插槽，然后图片需要用props传参。

小灰灰/ 2022年09月11日 03:14/ 0 赞/ 256 阅读

相关 vue引入图片和背景图

1，引入图片，在img元素中用：src绑定地址的 ![70][] 2，直接在样式中引用的 ![70 1][] [70]: /images/20220510

ゝ一世哀愁。/ 2022年05月10日 03:46/ 0 赞/ 350 阅读

相关 Vue系列七：事件处理

1. 绑定监听: v-on:xxx=“fun” @xxx=“fun” @xxx=“fun(参数)” 默认事件形参: event

红太狼/ 2022年01月30日 06:15/ 0 赞/ 291 阅读