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背投广告代码的完善
Apr 08 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
jQuery插件的写法分享
Jun 12 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
JS函数进阶之继承用法实例分析
Jan 15 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/01 无线电
php xml实例 留言本
2009/03/20 PHP
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
简单的php文件上传(实例)
2013/10/27 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
轻松实现php文件上传功能
2017/02/17 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
django如何通过类视图使用装饰器
2019/07/24 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
保证书范文大全
2014/04/28 职场文书
财务整改报告范文
2014/11/05 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2015年度企业工作总结
2015/05/21 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书