1、场景

一个页面开发团队进行页面的开发设计、无可避免的会发生样式选择器命名的重复（id的重复、class的重复等）。这样间接导致的后果就是、自己的页面样式好好的、在整合一起的时候、可能就会发生样式的错乱、怎样解决这个问题呢？ 很简单、在vue中单页面文件样式中加上scoped

2、错误的使用

假设现在编写的组件使用了相同的class命名。在进行页面设计时、想要达到的效果是、组件有自己的样式


3、错误效果展示

4、改进 在style标签中加上scoped属性

  1. 作用：让样式在局部生效，防止冲突。
  2. 写法：<style scoped>


5、改进后的效果

6、开发提示

在进行单页面开发时、为了保证页面样式。最好在样式中加上scoped属性。只在当前页面有效果

Vue学习之--------Scoped样式（2022/8/1）的更多相关文章

  1. Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别（2022/7/12）

    文章目录 1.绑定样式 1.1 基础知识 1.2 代码实例 1.3 测试效果 2.条件渲染 2.1 基本知识 2.2 代码实例 2.3 测试效果 1.绑定样式 没啥好说的.我觉得还没直接引入外部写好的 ...

  2. Vue 中 css scoped 样式穿透 ( stylus[>>>] / sass / less[/deep/] )

    scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖.这时我们 ...

  3. vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  4. vue组件中的样式属性--scoped

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...

  5. Vue中的scoped及穿透方法（修改第三方组件局部的样式）

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

  6. vue子组件的样式没有加scoped属性会影响父组件的样式

    scoped是一个vue的指令,用来控制组件的样式生效区域,加上scoped,样式只在当前组件内生效,不加scoped,这个节点下的样式会全局生效. 需要注意的是:一个组件的样式肯定是用来美化自己组件 ...

  7. VUE中 style scoped 修改原有样式

    作用域CSS 当<style>标记具有该scoped属性时,其CSS将仅应用于当前组件的元素.这类似于Shadow DOM中的样式封装.它有一些警告,但不需要任何polyfill.通过使用 ...

  8. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  9. Vue学习之--------深入理解Vuex之多组件共享数据（2022/9/4）

    在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters.mapState.mapGetters 1.在state中新增用户数组 2.新增Person.vue组件 提示:这里使 ...

随机推荐

  1. C# 从补码中获取有符号数的实际数值

    C# 从补码中获取有符号数的实际数值 原理 计算机存储数据时,默认是存储数据的补码.有符号的数粗存在符号位(最高位). 这里就会提到原码.反码.补码的概念. 原码:用符号位和数值表示带符号数,正数的符 ...

  2. while 循环、do- while 循环 和 for 循环之间的那点事

    C语言自学之三种循环比较 使用循环计算1-2+3-4+5-6+--100的值?    在编辑器中给出了三种循环体结构的部分代码,请选择合适的循环结构补全代码实现此功能.    运行结果为: sum=- ...

  3. 羽夏看Linux内核——引导启动（上）

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.如有好的建议,欢迎反馈.码字不易,如果本篇文章有帮助你的,如有闲钱,可以打赏支持我的创作.如想转载,请把我的转载信息附在文章后面,并 ...

  4. Spring源码 10 IOC refresh方法5

    本文章基于 Spring 5.3.15 Spring IOC 的核心是 AbstractApplicationContext 的 refresh 方法. 其中一共有 13 个主要方法,这里分析第 5 ...

  5. host,nslookup,dig 工具安装

    DNS-测试工具 在centos7.9 中 安装bind后发现缺少,检测工具 工具包安装: 1 [root@server]# yum install -y bind-utils 安装后再次查询,发现已 ...

  6. React报错之React Hook 'useEffect' is called in function

    正文从这开始~ 总览 为了解决错误"React Hook 'useEffect' is called in function that is neither a React function ...

  7. 轻松月薪过万，NISP证书含金量有多重|NISP管理中心|网安伴|nisp

    nisp一级证书含金量 NISP一级证书是面向各个行业工作人员信息安全意识普及化和网络信息安全基础培训的国家级验证.持NISP一级证书可以从信息安全保密较高的单位得到加分.证书由中国信息安全测评中心授 ...

  8. python(第四版阅读心得)（系统工具）（一）

    本章将会讲解python常用系统工具的介绍 python中大多数系统级接口都集中在两个模块: sys 和 os 但仍有部分其他标准模块也属于这个领域 如: 常见: glob   用于文件名扩展 soc ...

  9. Spire.Cloud 私有化部署教程（三） - Windows 系统

    本教程主要介绍如何在 Windows 系统上实现 Spire.Cloud 私有化部署. 详细步骤如下: 一.安装依赖 我们的私有部署的依赖有 Nodejs.MySQL.Redis 和 RabbitMQ ...

  10. python 数据挖掘模块学习

    项目中用到的模块 API # 模块: import pandas as pd import numpy as np from scipy.optimize import curve_fit numpy ...