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 相关文章推荐
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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
如何过滤高亮显示非法字符
2006/10/09 PHP
PHP一些有意思的小区别
2006/12/06 PHP
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
json跟xml的对比分析
2008/06/10 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
Python中文件的读取和写入操作
2018/04/27 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
python flask搭建web应用教程
2019/11/19 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
暑期研修感言
2014/02/17 职场文书
库房管理员岗位职责
2014/03/09 职场文书
1000字打架检讨书
2014/11/03 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
MySQL七大JOIN的具体使用
2022/02/28 MySQL