第十八章 Vue组件样式范围配置之scoped

news2024/11/7 7:46:51

目录

一、引言

二、案例演示 

2.1. 工程结构图

2.2. 核心代码

2.2.1. main.js 

2.2.2. App.vue

2.2.3. BaseOne.vue

2.2.4. BaseTwo.vue

2.3. 运行效果

2.4. 调整代码 

2.4.1. BaseTwo.vue

2.4.2. 运行效果

三、scoped原理


一、引言

前面的几个章节在介绍组件的时候我们提到过,Vue组件是由<template>、<style>和<script>三大部分组成,那么本章节我们将对组件中的样式做一个再深入讲解。

日常开发过程中,我们经常会碰到一些HTML元素样式冲突的情况,且排查和管理比较耗费精力,那么Vue在组件的样式方面,是怎样处理冲突的呢?这就要提到Vue组件样式中的scoped属性:

默认情况:写在Vue组件中的样式会全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

1. 全局样式: 默认组件中的样式会作用到全局

2. 局部样式: 可以给组件加上 scoped 属性, 可以让样式只作用于当前组件

二、案例演示 

2.1. 工程结构图

2.2. 核心代码

2.2.1. main.js 

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

2.2.2. App.vue

<template>
  <div class="App">
    <BaseOne></BaseOne>
    <BaseTwo></BaseTwo>
  </div>
</template>

<script>
import BaseOne from './components/BaseOne.vue'
import BaseTwo from './components/BaseTwo.vue'
export default {
  components: {
    BaseOne,
    BaseTwo
  }
}
</script>

<style>

</style>

2.2.3. BaseOne.vue

<template>
  <div>BaseOne</div>
</template>

<script>
export default {

}
</script>

<style>
</style>

2.2.4. BaseTwo.vue

<template>
  <div>BaseOne</div>
</template>

<script>
export default {

}
</script>

<style>
</style>

2.3. 运行效果

我们会发现组件BaseTwo中的样式对App.vue和BaseOne.vue生效了,即全局生效:

2.4. 调整代码 

2.4.1. BaseTwo.vue

<template>
  <div>BaseTwo</div>
</template>

<script>
export default {

}
</script>

<style scoped>
/*
 * 默认样式会作用于全局
 */
div {
  border: 3px solid blue;
  margin: 30px;
}
</style>

2.4.2. 运行效果

我们将BaseTwo中的样式增加scoped属性,我们能看到这个样式只对当前组件生效:

三、scoped原理

我们在日常项目开发的过程中,要注意的是组件应该有着自己独立的样式,因此推荐加上scoped属性,scoped的原理如下

1. 当前组件内标签都被添加 data-v-hash值的属性

2. css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2228948.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

可口可乐三季报 | 数字化助力,营收超预期 | ​eBest

可口可乐公司近日公布了2024年第三季度业绩报告。报告特别强调了数字技术&#xff0c;尤其是AI人工智能对推动增长的重要作用。 第三季度&#xff0c;可口可乐公司交出了一份亮眼的成绩单&#xff0c;营收和每股收益均超出市场预期&#xff0c;显示出公司业务的强大韧性和长期…

书生大模型实战营 L0 入门岛

书生大模型训练营入门岛任务——训练营链接 1. Linux前置知识 任务&#xff1a;端口转发 当使用vscode远程连接服务器时&#xff0c;在服务器运行的任务&#xff0c;vscode会自动帮忙进行端口映射&#xff0c;方便本地进行访问。 2. Python前置知识 任务1&#xff1a;Leec…

配置mysql 主主模式 GTID

文章目录 一、前提二、修改my.cnf主1 10.255.131.9主2 10.255.131.10 三、配置主主3.1 配置主 10.255.131.93.2 配置从 10.255.131.103.3 配置主 10.255.131.103.4 配置从 10.255.131.9 四、验证五、同步问题排查以及恢复5.1 查看同步状态5.2 查看同步是否数据一致性&#xff0…

【Vulnhub靶场】DC-5

DC-5靶机下载地址&#xff1a; https://download.vulnhub.com/dc/DC-5.zip 目标 本机IP&#xff1a;192.168.118.128 靶机IP&#xff1a;192.168.118.0/24 信息收集 扫描存活主机&#xff0c;扫描端口&#xff0c;扫描服务 第一步使用nmap扫描出目标IP为&#xff1a;192.168…

docker 安装kuboard

mkdir /root/kuboard-data docker run --restartunless-stopped -p 8453:80 -d --name kuboard -e KUBOARD_AGENT_SERVER_TCP_PORT8453 -e KUBOARD_ENDPOINThttps://192.168.31.177 -v /root/kuboard-data:/data eipwork/kuboard:v3http://192.168.31.177:8453/ 默认账号&…

SpringBoot和弦:创建Web音乐网站指南

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理音乐网站的相关信息成为必然。开发合适的音…

LinkedList和链表(下)

1. 什么是LinkedList 在练习了单链表的自我实现和单链表的一些习题之后,我们正式来认识一下java提供的LinkedList,这是一种双向链表结构,在增删元素的时候效率比较高,不需要像ArrayList一样搬运元素.但是在查找方面效率比较低(需要遍历链表),ArrayList效率就比较高(直接由数组下…

DevOps赋能:优化业务价值流的实战策略与路径(下)

下篇&#xff1a;加速工作项流动与持续改进优化 —— 跨越差距&#xff0c;迈向卓越交付 在上篇中&#xff0c;我们已经深入探讨了看板方法的四大核心实践&#xff0c;它们共同致力于实现“顺畅且高质量地交付价值”的终极目标。然而&#xff0c;理想与现实之间往往存在一定的…

day14:RSYNC同步

一&#xff0c;概述 概述 rsync &#xff08;开源&#xff09;是一个高效的文件同步和传输工具&#xff0c;广泛用于 Linux 和 Unix 系统中。它可以在本地和远程系统之间同步文件和目录&#xff0c;同时支持增量备份&#xff0c;能够只传输更改过的文件部分&#xff0c;以减少…

Leaflet查询矢量瓦片偏移的问题

1、问题现象 使用Leaflet绘制工具查询出来的结果有偏移 2、问题排查 1&#xff09;Leaflet中latLngToContainerPoint和latLngToLayerPoint的区别 2&#xff09;使用Leaflet查询需要使用像素坐标 3&#xff09;经排查发现&#xff0c;container获取的坐标是地图容器坐标&…

JSP水果商城管理系统WEB项目

一、项目简介 > FruitsDay 是一个用于销售水果的WEB商城项目。 > 该项目主要通过Java和JSP实现&#xff0c;旨在帮助用户实现网购水果&#xff0c;并帮助商家管理水果库存。 > 项目采用Maven构建&#xff0c;使用JSP和Servlet实现&#xff0c;比较适合JAVA初学者…

Rust 力扣 - 1. 两数相加

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们使用一个全局的备忘录&#xff0c;然后我们遍历数组&#xff0c;如果当前元素在备忘录里面找到了&#xff0c;就返回备忘录里面记录的下标和当前下标记录&#xff0c;没找到就把当前元素匹配的元素和当前元素…

ssm016基于 Java Web 的校园驿站管理系统(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;校园驿站管理系统的设计与实现 摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好…

NCCL安装(Ubuntu等)

目录 一、NCCL的定义二、安装NCCL的原因1、加速多GPU通信2、支持流行的深度学习框架3、提高计算效率4、易于使用和集成5、可扩展性 三、NCCL安装方法1、下载安装包2、更新APT数据库3、使用APT安装libnccl2包&#xff0c;另外&#xff0c;如果需要使用NCCL编译应用程序&#xff…

Spring的IOC技术(配置文件形式)

目录 一、什么是IOC 二、IOC的程序入门 1.创建mavenJava项目&#xff0c;引入依赖 2.编写接口和实现类 3.编写spring核心配置文件(applicationContext.xml) 4.测试类 5.测试结果-------一个对象 三、Spring框架的Bean管理的配置文件 四、实例化Bean对象的三种方式 1.无…

论文阅读(三十二):EGNet: Edge Guidance Network for Salient Object Detection

文章目录 1.Introduction2.Related Works3.Salient Edge Guidance Network3.1Complementary information modeling3.1.1Progressive salient object features extraction3.1.2Non-local salient edge features extraction 3.2One-to-one guidance module 4.Experiments4.1Imple…

深度学习:卷积神经网络中的img2col

im2col 是一种在卷积神经网络&#xff08;CNN&#xff09;中常用的技术&#xff0c;用于将输入图像数据转换为适合卷积操作的矩阵形式。通过这种转换&#xff0c;卷积操作可以被高效地实现为矩阵乘法&#xff0c;从而加速计算。 在传统的卷积操作中&#xff0c;卷积核&#xff…

java:入门基础(1)

练习一&#xff1a;文字版格斗游戏 需求: ​ 格斗游戏&#xff0c;每个游戏角色的姓名&#xff0c;血量&#xff0c;都不相同&#xff0c;在选定人物的时候&#xff08;new对象的时候&#xff09;&#xff0c;这些信息就应该被确定下来。 举例&#xff1a; ​ 程序运行之后…

计算机毕业设计 | springboot+vue电影院会员管理系统 影院后台管理(附源码)

1&#xff0c;项目背景 随着互联网时代的到来&#xff0c;同时计算机网络技术高速发展&#xff0c;网络管理运用也变得越来越广泛。因此&#xff0c;建立一个B/S结构的电影院会员管理系统&#xff1b;电影院会员管理系统的管理工作系统化、规范化&#xff0c;也会提高影院形象…

TypeScript(中)+算法(二)

文章目录 算法排序冒泡排序选择排序 TS类型声明类型推断类型总览js中的数据类型ts中的数据类型原始类型和包装对象原始类型包装对象自动装箱 常用类型与语法anyunknownnevervoidvoid 与 undefined总结 算法 排序 有十种排序算法&#xff0c;分别是&#xff1a;冒泡排序&#…