vue style 的实现主要通过css 的属性选择器
什么是属性选择器?
答:用于判断标签属性的一种选择器
<style>
.a[self_attribute]{
...
}
</style>
<!-- 生效 -->
<div self_attribute class="a"></div>
<!-- 不生效 -->
<div class="a"></div>
组件定义scoped class
编译完成后,为了防止class 与其他组件的样式产生覆盖,vue生成随机名使用属性选择器来区分
<template>
<p class="app">app</p>
</template>
<style scoped>
.app {
font-size: 20px;
}
</style>
------------------------------------------
编译结果
<p data-v-7a7a37b1 class="app">app</p>
.app[data-v-7a7a37b1] {
font-size: 20px;
}
组件定义没有scoped 的 class
这个比较简单,全局使用的话,编译后的class 不加任何属性选择器就行了
深度css呢
可见当使用深度css,编译结果有一条[data-v-7a7a37b1] .hello_world
[data-v-7a7a37b1]
是App.vue的标记,p作为HelloWorld.vue
的根标签,也被绑定了[data-v-7a7a37b1]
,在[data-v-7a7a37b1]
下的全部.hello_world
都会生效,值得注意的是[data-v-7a7a37b1] .hello_world
使用的是后代选择器,作为根标签的p本身并不会受深度css的影响,只对非根标签影响。
=== App.vue
<template>
<p class="app">app</p>
<HelloWorld class="hello_world"></HelloWorld>
</template>
<style scoped>
::v-deep(.hello_world) {
font-size: 40px;
}
</style>
=== HelloWorld.vue
<template>
<p class="hello_world">hello_world</p>
</template>
------------------------------------------
编译结果
<p data-v-e17ea971="" data-v-7a7a37b1="" class="hello_world">hello_world</p>
[data-v-7a7a37b1] .hello_world {
font-size: 40px;
}
标签:style,vue,选择器,7a7a37b1,world,原理,data,hello
From: https://www.cnblogs.com/adamr/p/17764938.html