九、Vue中的CSS

Scoped CSS

  • 限定了范围的css
  • 无法影响外部元素
  • 外部样式一般不影响内部
  • 可以通过/deep/或>>>穿透

Vue中的css

  • style可以写在.vue中
  • 模拟Scoped CSS
    • 方案一:随机选择器
      • css modules
    • 方案二:随机属性
      • <div abcdefg>
      • div[abcdefg]{}
  • vue工具vue-cli
    vue init webpack来创建项目
<style scoped>
.demo{
    color:red
}
</style>

或者

<div :class="$style.demo">Hello World</div>
<style module>
.demo{
    color:red
}
</style>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,243评论 7 35
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,281评论 1 22
  • 今天是周末也是2017年最后一天,这一年发生不少的变化。 我们搞了个"本周做了什么"的活动,从形式上大家坚持了下来...
    青梅煮酒2022阅读 157评论 0 1
  • 你已疲惫不堪了, 但是我还是感觉得到手心握着的温暖!
    墙角的梅花阅读 222评论 0 4