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之一(对象的组成)
Jun 11 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
去除html代码里面的script正则方法
May 19 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
js实现选项卡效果
Mar 07 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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垃圾代码优化操作代码
2010/08/05 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
浅谈PHP封装CURL
2019/03/06 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
客户端静态页面玩分页
2006/06/26 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
python 检查文件mime类型的方法
2018/12/08 Python
在线课程:Skillshare
2019/04/02 全球购物
《第一次抱母亲》教学反思
2014/04/16 职场文书
小学五年级学生评语
2014/04/22 职场文书
学校评语大全
2014/05/06 职场文书
励志演讲稿800字
2014/08/21 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
仓管员岗位职责
2015/02/03 职场文书
教师节感想
2015/08/11 职场文书
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android