Vue-scoped(局部)样式使用方法及实例代码
更新时间：2023年05月02日 09:26:28 作者：小花皮猪
这篇文章主要介绍了Vue-scoped(局部)样式使用方法及实例代码，文中示例代码介绍了的非常详细感兴趣的同学可以参考阅读一下
scoped(局部)样式
scoped是在脚手架有一个编写样式的小技巧
作用：让样式在局部生效，防止冲突
1 编写案例
现在有两个组件，一个student,一个school，现在想给组件写点样式
这里只给个背景色
没问题，样式生效
2 样式冲突
在组件中写的样式，最后会汇总到一起，哪怕写了100个组件，这100的组件的样式也都是汇总到一起的，这样可能就会出现问题，比如类名冲突，下面我就演示一下
注意看，我这里有两个组件，组件的样式都叫test，但是样式不同，然后我让这两个组件的class相同
发现出现了样式冲突，哪个组件先被引入，就会被后者给替换掉，也就是后者代替前者的样式
传统解决办法
如果想避免冲突，传统的解决办法是让样式名称不同，但是有点不现实
vue解决办法
vue给我们提供了解决办法，可以使用scoped属性，表示当前这个样式只适用于当前的组件
3 特别注意：APP组件
scoped虽然好用,但是也不是适用于全部组件的，有一个人就比较特殊，那就是App
因为App是全部组件之父，一般在App里面写的样式，都是组件可以复用的，这时候给App组件声明scoped就不合适了
所以App组件一般不使用scoped,如果有的样式是App里面独有的，那么是可以使用的
4 总结
scoped样式
作用：让样式在局部生效，防止冲突
到此这篇关于Vue-scoped(局部)样式使用方法及实例代码的文章就介绍到这了,更多相关Vue-scoped(局部)样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。通过本文给大家分享vuex 渐进式教程实例代码，从入门级带你慢慢深入使用vuex，感兴趣的朋友一起看看吧2018-11-11
这篇文章主要介绍了vue 动态添加class,三个以上的条件做判断方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue axios同步请求解决方案,需要的朋友可以参考下2017-09-09
这篇文章主要为大家详细介绍了vue3.0实现移动端电子签名组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
Element树形控件整合带图标的下拉菜单(tree+dropdown+input)
Element UI 官网提供的树形控件包含基础的、可选择的、自定义节点内容的、带节点过滤的以及可拖拽节点的树形结构，本文实现了树形控件整合带图标的下拉菜单，感兴趣的可以了解一下2021-07-07
这篇文章主要介绍了Vue3中的常见组件通信之v-model使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue-cli 项目打包完成后运行文件路径报错问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
今天小编就为大家分享一篇解决vue路由后界面没有变化,但是链接有的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue ElementUI table实现双击修改编辑某个内容的方法
在实现表格单元格双击编辑功能时,需使用@cell-dblclick事件来触发双击操作,将单元格切换为input输入框,通过ref引用和绑定失焦及回车事件来确认编辑,同时,需要处理编辑数据的更新和方法逻辑的完善2024-09-09
van-uploader保存文件到后端回显后端接口返回的数据
前端开发想省时间就是要找框架呀,下面这篇文章主要给大家介绍了关于van-uploader保存文件到后端回显后端接口返回的数据,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
最新评论