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 相关文章推荐
简明json介绍
Sep 28 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
vue判断按钮是否可以点击
Apr 09 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
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
详解Vue之父子组件传值
2019/04/01 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
Python基类函数的重载与调用实例分析
2015/01/12 Python
python中__call__内置函数用法实例
2015/06/04 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Python中turtle作图示例
2017/11/15 Python
对于Python深浅拷贝的理解
2019/07/29 Python
在pycharm中实现删除bookmark
2020/02/14 Python
python collections模块的使用
2020/10/16 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
经理岗位职责范本
2015/04/15 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
地震捐款简报
2015/07/21 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python