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 相关文章推荐
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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打造属于自己的MVC框架
2012/03/07 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
js运动事件函数详解
2016/10/21 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
python求斐波那契数列示例分享
2014/02/14 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
python批量爬取下载抖音视频
2019/06/17 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
中学教师实习自我鉴定
2013/09/28 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
商业用房租赁协议书
2014/10/13 职场文书
师德师风事迹材料
2014/12/20 职场文书
西游降魔篇观后感
2015/06/15 职场文书