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 图片预加载 自动等比例缩放插件
Dec 25 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 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在Web开发领域的优势
2006/10/09 PHP
我的群发邮件程序
2006/10/09 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
PHP查询分页的实现代码
2017/06/09 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
js模块加载方式浅析
2017/08/12 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Python中遍历列表的方法总结
2019/06/27 Python
python 使用shutil复制图片的例子
2019/12/13 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
上课迟到检讨书
2014/01/19 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript