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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 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
php实现两个数组相加的方法
2015/02/17 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
详解python实现线程安全的单例模式
2018/03/05 Python
浅谈flask源码之请求过程
2018/07/26 Python
python实现flappy bird游戏
2018/12/24 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python实现电子词典
2020/03/03 Python
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
UNIX文件系统分类
2014/11/11 面试题
求职信的要素有哪些呢
2013/12/26 职场文书
平安工地汇报材料
2014/08/19 职场文书
工资收入证明
2014/10/07 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
检讨书格式范文
2015/05/07 职场文书
人生遥控器观后感
2015/06/11 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
python 如何获取页面所有a标签下href的值
2021/05/06 Python
Html5生成验证码的示例代码
2021/05/10 Javascript
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python