vue组件中的样式属性scoped实例详解


Posted in Javascript onOctober 30, 2018

Scoped CSS

Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范。

vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素

 它是通过使用PostCSS来改变以下内容实现的:

<style scoped>
.example {
 color: red;
}
</style>

<template>
 <div class="example">hi</div>
</template>

渲染结果:

<style>
.example[data-v-f3f3eg9] {
 color: red;
}
</style>

<template>
 <div class="example" data-v-f3f3eg9>hi</div>
</template>

混合使用全局属性和局部属性

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

关于子组件的根元素

使用了scoped属性之后,父组件的style样式将不会渗透到子组件中,然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响,这么设计的目的是父组件可以对子组件根元素进行布局。
.vue模板中的样式是根据需要按需加载,访问一个页面该组件中的样式就会追加到head标签中,如果父子组件中都对某个子组件根节点元素进行了控制,则父组件里的样式会被后来的覆盖。

深选择器

如果想对设置了scoped的子组件里的元素进行控制可以使用'>>>'或者'deep'

<template>
 <div id="app">
  <gHeader></gHeader>
 </div>
</template>

<style lang="css" scoped>
 .gHeader /deep/ .name{ //第一种写法
  color:red;
 }
 .gHeader >>> .name{  //二种写法
  color:red;
 }
</style>

<div class="gHeader">
 <div class="name"></div>
</div>

一些预处理程序例如sass不能解析>>>属性,这种情况下可以用deep,它是>>>的别名,工作原理相同。

动态生成的内容

使用v-html动态创建的DOM内容,不受设置scoped的样式影响,但你依然可以使用深选择器进行控制

下面给大家补充下vue中使用v-html加载的富文本,css中定义样式不生效

如题,使用v-html加载一段富文本,富文本里包含图片,在手机上图片宽度可能会溢出

<div v-html="htmlContent" class="rich"></div> 
  <style scope>
  .rich>>> img{ display:block; max-width: 100%}
  </style>

注意:这里的>>>需要使用css语法,写在less里会报错

总结

以上所述是小编给大家介绍的vue组件中的样式属性scoped实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
node上的redis调用优化示例详解
Oct 30 #Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 #Javascript
Vue.js 父子组件通信的十种方式
Oct 30 #Javascript
vue通过style或者class改变样式的实例代码
Oct 30 #Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 #Javascript
微信小程序实现左滑修改、删除功能
Oct 19 #Javascript
小程序实现列表删除功能
Oct 30 #Javascript
You might like
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
js实现搜索栏效果
2018/11/16 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
python中map()函数的使用方法示例
2017/09/29 Python
对pandas中apply函数的用法详解
2018/04/10 Python
Python 加密与解密小结
2018/12/06 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
学习python的前途 python挣钱
2019/02/27 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
教师学习培训邀请函
2014/02/04 职场文书
初中新生军训方案
2014/05/13 职场文书
房屋授权委托书范本
2014/10/07 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
2014年接待工作总结
2014/11/26 职场文书
公积金贷款承诺书
2015/04/30 职场文书
关于环保的广播稿
2015/12/17 职场文书
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS