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 相关文章推荐
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
js中日期的加减法
May 06 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 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/09/07 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
jquery 常用操作方法
2010/01/28 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
深入理解React高阶组件
2017/09/28 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
项目考察欢迎辞
2014/01/17 职场文书
银行求职信
2014/05/31 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
全国助残日活动总结
2015/05/11 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
入党介绍人意见2015
2015/06/01 职场文书
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang