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 相关文章推荐
js中关于一个分号的崩溃示例
Nov 11 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
Node.js文件操作详解
Aug 16 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
详解vue-cli 接口代理配置
Dec 13 Javascript
webpack多页面开发实践
Dec 18 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
layui点击数据表格添加或删除一行的例子
Sep 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/04/29 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
浅析Python多线程下的变量问题
2015/04/28 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
python里 super类的工作原理详解
2019/06/19 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
为什么要用EJB
2014/04/17 面试题
学年自我鉴定范文
2013/10/01 职场文书
实习自我鉴定
2013/12/15 职场文书
班主任寄语大全
2014/04/04 职场文书
安全目标管理责任书
2014/07/25 职场文书
网络营销计划
2015/01/17 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
Docker部署Mysql8的实现步骤
2022/07/07 Servers