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 相关文章推荐
一些常用的JS功能函数代码
Jun 23 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
three.js实现圆柱体
Dec 30 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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二维码生成
2015/10/19 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
layDate日期控件使用方法详解
2018/11/15 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
python实现查询IP地址所在地
2015/03/29 Python
django ajax json的实例代码
2018/05/29 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
户外宣传策划方案
2014/05/25 职场文书
爱护公共设施标语
2014/06/24 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
房屋过户委托书范本
2014/10/07 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
初中政教处工作总结
2015/08/12 职场文书
升学宴家长答谢词
2015/09/29 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
python实现会员管理系统
2022/03/18 Python
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技