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. FPGA/Verilog 资源整理

    verilog学习教程(以Vivado为载体)https://vlab.ustc.edu.cn/guide/index.html 中科大的数电实验网站https://vlab.ustc.edu.cn/

  2. 安装 NetworkManager（Debian最小化安装）

    Debian最小化安装是没有NetworkManager 1 安装: 2 [root@debian]apt install -y netwok-manager 1 启动(查看网卡): 2 [root@ ...

  3. CAD参数化功能的一些构想

    cad二次开发人员通常对设计的具体业务不够理解,而设计人员对程序开发的学习成本也较高. 可否将cad的参数化功能搭建为二次开发人员与设计人员之间的桥梁. 如设计人员提前利用参数化功能建立对应的动态块, ...

  4. vue.js及H5常见跨域问题解决方案

    一.原生H5跨域问题解决方案 1.live-server 代理解决 首先在有node.js环境下,打开命令行工具,输入 npm install live-server -g 全局安装全局安装 live ...

  5. Java中字节流的总结及代码练习

    Java中的字节流 在描述字节流时,先知道什么是流 流可以分为:输入流和输出流 输入流和输出流 示意图: 字节流读取内容:二进制,音频,视频 优缺点:可以保证视频音频无损,效率低,没有缓冲区 字节流可 ...

  6. python筛选excel内容并生成exe文件

    最近疫情原因,班级每天都要筛选未打卡人员,每次都手动操作太麻烦了.遂写下如下的程序,并且生成了exe可执行文件. 1. 主程序 import openpyxl import pyperclip # 1 ...

  7. Java控制台打印三角形

    for (int i = 1; i <= 5; i++) { //最上面先是五个往下一次4.3.2.1 for (int j = 5; j >= i; j--) { System.out. ...

  8. 使用man手册查看内核函数

    1.为避免man的一些功能缺失,先装好manpages-dev sudo apt-get install manpages-dev 2.安装mandocs的依赖包xmlto sudo apt-get ...

  9. gem5 使用记录， 基于理解来写个最简单的计数器程序

    学习GEM5其实是因为工作需要,主要是用来做数字电路的模型仿真的,之前用过 systemC,现在公司用的 gem5,其实本质上都是 C++只是套个不同的壳然后拿去仿真而已,SC本身就提供了时钟可以仿真 ...

  10. 066_末晨曦Vue技术_过渡 & 动画之多个元素的过渡

    多个元素的过渡 点击打开视频讲解更加详细 我们之后讨论多个组件的过渡,对于原生标签可以使用 v-if/v-else.最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transiti ...