Vue中的scoped的实现原理以及scoped穿透的用法
本篇文章给大家带来的内容是关于Vue中的scoped的实现原理以及scoped穿透的用法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
1.什么是scoped
在Vue文件中的style标签上有一个特殊的属性,scoped。当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性,相当于实现了样式的模块化。
2.scoped的实现原理
Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:
1 2 3 4 5 6 7 8 |
|
转译后:
1 2 3 4 5 6 |
|
既:PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,给css选择器额外添加一个对应的属性选择器,来选择组件中的dom,这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。
总结:scoped的渲染规则:
给HTML的dom节点添加一个不重复的data属性(例如: data-v-5558831a)来唯一标识这个dom 元素
在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如:[data-v-5558831a])来私有化样式
3.scoped穿透
scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播),需要在局部组件中修改第三方组件库的样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。
stylus的样式穿透 使用>>>
1 2 3 4 5 |
|
sass和less的样式穿透 使用/deep/
1 2 3 4 5 6 |
|
3.在组件中修改第三方组件库样式的其它方法
上面我们介绍了在使用scoped 属性时,通过scopd穿透的方式修改引入第三方组件库样式的方法,下面我们介绍其它方式来修改引入第三方组件库的样式
在vue组件中不使用scoped属性在vue组建中使用两个style标签,一个加上scoped属性,一个不加scoped属性,把需要覆盖的css样式写在不加scoped属性的style标签里建立一个reset.css(基础全局样式)文件,里面写覆盖的css样式,在入口文件main.js 中引入
相关文章推荐:
Vue实现组件切换的两种方式介绍(附代码)
node服务器如何实现豆瓣数据的获取(代码)
以上就是Vue中的scoped的实现原理以及scoped穿透的用法(附代码)的详细内容,更多请关注php中文网其它相关文章!
原文http://www.php.cn/js-tutorial-407854.html
Vue中的scoped的实现原理以及scoped穿透的用法相关推荐
- vue中动态样式不起作用? scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped 转载于:https://www. ...
- Vue中的基础过渡动画原理解析
前言 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡 ...
- vue中前端实现pdf预览(含vue-pdf插件用法)
场景:前端需要根据后端返回的线上pdf的地址,实现pdf的预览功能. 情况一:后端返回的pdf地址,粘贴到浏览器的url框中,是可以在浏览器中直接进行预览的. 方法(1)可以直接使用window.op ...
- vue中$root的用法
vue中$root是用来访问根组件的,用法: this.$root.根组件属性 代码: main.js: new Vue({data(){return{isUpdate:true //根组件属性}}, ...
- vue 中的scoped原理
scoped作用 在vue文件中的style标签上加上scoped属性,则style标签下的样式只能在本组件中使用. 如果每一个vue组件的style标签都加上了scoped,那就实现了样式的模块化. ...
- 理解vue中less的scoped和/deep/工作原理
理解vue中less的scoped和/deep/工作原理 scoped /deep/ 实战 总结 scoped vue项目一般是单页面.多组件,整个项目共用一个css样式表,有时候我们在写组件的过程中 ...
- Vue中关于scoped以及scoped样式穿透的原理与使用详解
1. scoped 当多个组件中有相同的元素或相同的类名时,在其中一个组件中更改该元素的样式,会导致所有组件中的样式更改,造成样式污染,若只想该样式在当前组件生效就需要用到scoped 示例 组件de ...
- Vue中的scoped实现原理和样式穿透方法及原理
目录 scoped 一.什么是scoped,为什么要用 二.scoped的原理 三.示例 样式穿透 一.为什么需要穿透scoped? 二.样式穿透的方法 三.样式穿透原理 1.示例 2.效果图 sco ...
- Vue中Css的scoped的原理
当style标签拥有scoped属性的时候,它的css样式只会作用在当前组件 也就是说scoped可以使得组件之间的样式互相隔离,互不影响 如果一个项目中的左右组件style标签都加上scoped就相 ...
最新文章
- Redis创建高可用集群教程【Windows环境】
- 交互式计算机图形学总结:第一章 图形系统和模型
- html 5 video audio
- 对mysql优化关注_MySQL优化看这篇就对了
- 计算机精英协会考核题 —— 第一题:厄密多项式
- Apache Derby-02通过IJ简单操作DERBY
- ToString() 格式化字符串总结
- 大数据上云第一课:MaxCompute授权和外表操作躲坑指南
- Head First Java学习笔记(2):类与对象
- 十年厚积!Arm Neoverse 重磅推出 V1 和 N2平台,加速基础设施转型
- cad审图软件lisp_cad审图什么软件好 创基出图助手教程(附下载)
- 特稿:成都,一座“吃饱了撑的”城市
- switch日文键盘打中文_从塞尔达到动森,游戏中使用的中文字体有什么问题?
- ITUNES更改备份保存路径(不放C盘,不占C盘)、C盘空间不够
- 苹果手机sim卡无效怎么办_苹果手机存储空间不足怎么办
- python爬取微信好友信息_python itchat 爬取微信好友信息
- abc云支付php,糖果易支付 - 免签约支付平台,彩虹易支付,abc云支付,糖果支付
- 物联网智能开关平台源码
- Azure Blob Storage 基本用法上传/下载(Java)
- 游戏建模:想要做好人物角色模型,先了解人体的构造