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

青旅半醒 2023-01-11 09:12 404阅读 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 条评论，404人围观）

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

相关阅读

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

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

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

相关 vue 循环遍历背景图

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

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

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

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

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

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

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

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

相关 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 赞/ 98 阅读

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

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

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

相关 Vue动态切换背景图

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

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

相关 Vue学习笔记七

使用prop向子组件传递数据 <div id="app"> <child v-for="item in items" v-bind:msg="item.n

我就是我/ 2022年06月09日 11:25/ 0 赞/ 195 阅读

相关 vue引入图片和背景图

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

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

相关 Vue系列七：事件处理

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

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