vue之样式问题
在样式开发过程中,有两个问题比较突出:
全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面的样式会将前面的覆盖;
选择器复杂 —— 为了避免上面的问题,我们在编写样式的时候不得不小心翼翼,类名里会带上限制范围的标示,变得越来越长,多人开发时还很容易导致命名风格混乱,一个元素上使用的选择器个数也可能越来越多,最终导致难以维护。
vue 为我们提供了 scoped 可以很方便的解决上述问题,它给 css 加了一个域的概念。详细文档见 vue-loader
/* 编译前 */
.example {
color: red;
} /* 编译后 */
.example[_v-f3f3eg9] {
color: red;
}
注意⚠️:
1、只要加上 <style scoped>
这样 css 就只会作用在当前组件内了。
2、使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
3、如果你希望 scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,可以使用 >>>
操作,Sass 之类的预处理器无法正确解析 >>>
。这种情况下你可以使用 /deep/
操作符取而代之——这是一个 >>>
的别名,同样可以正常工作。
<style scoped>
.a >>> .b { /* ... */ }
</style>
编译后为:
.a[data-v-f3f3eg9] .b { /* ... */ }
4、通过 v-html
创建的 DOM 内容不受 scoped 样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式。
vue之样式问题的更多相关文章
- vue 绑定样式的几种方式
vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...
- vue的样式绑定
vue在样式绑定,看这官方的文档,怎么试都不行后来看了一篇文章 <div :class="[rankClass]"></div> <script> ...
- Vue 将样式绑定到一个对象让模板更清晰
Vue 将样式绑定到一个对象让模板更清晰 <div id="app"> <div v-bind:style="styleObject"> ...
- vue.js样式绑定
vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...
- 10.Vue.js 样式绑定
Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- $Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数
一 小知识回顾 1 级联删除问题 2 一张表关联多个表,比如有manytomanyfileds forignkey,基于对象查询存在的问题:反向查询的时候 表名小写_set.all()不知是哪个字段 ...
- vue 中样式的绑定
1.class的对象绑定 //对应的css <style> .active { color: red; } </style> <!--html 对应的代码--> & ...
- vue切换样式
在vue中使用事件来切换绑定的class样式,在vue-cli脚手架中的Home.vue中 <template> <div id="main"> <l ...
- Vue初级-样式
整个网页不仅有标签还有css进行渲染,所以,现在讲讲在vue里面加入你想加的css. 在不用vue的时候,有一种内联方式加入css(大概是<div style="..."&g ...
随机推荐
- Linux批量解压缩脚本
#!/bin/bash # 批量解压缩脚本 # 作者: shaohsiung # 时间: // # Store all file names in the tmp directory with the ...
- python基础第9章 魔法方法、属性和迭代器(一)
__getitem__和__setitem__: 这个方法返回与指定键想关联的值.对序列来说,键应该是0~n-1的整数,其中n为序列的长度.对映射来说,键可以是任何类型. class A : __ge ...
- Delphi实现屏幕截图、窗口截图、指定区域截图
Use Jpeg procedure TForm1.snapscreen(a,b,c,d:Integer); var bmpscreen:Tbitmap; jpegscreen:Tjpegimage; ...
- VS卸载不干净,再次安装盘符不能更改问题(转载)
下载文件,直接用. 链接:https://pan.baidu.com/s/1K1cbJUq_JC9DN2MoE6Z3RA 密码:cuad
- NX二次开发-对话框解锁UF_UI_unlock_ug_access
VC/MFC调用UG Dialog要进入加锁状态 加锁 UF_UI_lock_ug_access ( UF_UI_FROM_CUSTOM ); 此处为UF_UI_select的函数 解锁 UF_UI_ ...
- Api:temple
ylbtech-Api: 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbtech.cnb ...
- iOS开发静态库冲突——如何查看静态库(.O)中方法名
1.bug产生 应用第三方静态库之后提示冲突错误: 2.bug分析 一般会提示哪两个库冲突: CameraShowGLView.o是自己创建的类编译生成的: libLechangeSDK.a是添加的静 ...
- 如何提高阿里云cdn命中率?原命中率极低。
博客搬迁了,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/08/29/%E5%A6%82%E4%BD%95%E6%8F%90%E9%AB%98%E9 ...
- 15-Ubuntu-文件和目录命令-查看目录内容-ls-2
4. ls和通配符的使用 通配符适用的地方:shell命令行或者shell脚本中. 正则表达式适用的地方:字符串处理时,一般有一般正则和Perl正则. 正则表达式与通配符有相同的符号但是意义不同!! ...
- 14-Ubuntu-文件和目录命令-查看目录内容-ls-1
1.终端使用技巧 (1)tab键自动补全 (2)按上/下光标键查看使用过的命令 (3)退出当前命令,Ctrl C (4)缩小--Ctrl - ;放大--Ctrl shift + 2.ls 命令--查看 ...