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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
JS中的多态实例详解
Oct 15 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 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定时执行计划任务的多种方法小结
2011/12/19 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
Python标准库之collections包的使用教程
2017/04/27 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
追悼会主持词
2014/03/20 职场文书
企业法人授权委托书
2014/04/03 职场文书
企业文明单位申报材料
2014/05/16 职场文书
投标诚信承诺书
2014/05/26 职场文书
硕士生找工作求职信
2014/07/05 职场文书
干部考察材料范文
2014/12/24 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
寒假致家长的一封信
2015/10/10 职场文书
倡议书怎么写?
2019/04/11 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
Python 键盘事件详解
2021/11/11 Python