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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
Jquery性能优化详解
May 15 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
解决vue中provide inject的响应式监听
Apr 19 Vue.js
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 xml文件操作代码(一)
2009/03/20 PHP
php文件下载处理方法分析
2015/04/22 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
简单的js计算器实现
2016/10/26 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
python 获取本机ip地址的两个方法
2013/02/25 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
Python 忽略warning的输出方法
2018/10/18 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
python编写简单端口扫描器
2019/09/04 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
再婚婚前财产协议书范本
2014/10/19 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
工作时间调整通知
2015/04/24 职场文书
最美乡村教师观后感
2015/06/11 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
高中班主任寄语
2019/06/21 职场文书
Python中异常处理用法
2021/11/27 Python
Python四款GUI图形界面库介绍
2022/06/05 Python
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android