相关版本
- vue-cli: @2.8.2
- vue: ^2.4.2
- vue-loader: ^13.0.4
- webpack: ^2.6.1
各种不同的<style>
- <style>
- <style scoped>
- <style module>
<style>插入<head>的顺序
- 对单个组件，按照<style>出现的顺序插入<head>
- 遍历组件的子组件，依次对子组件执行步骤1，在开发时执行的顺序按照子组件在template中出现的顺序，生产构建时执行的顺序按照引入子组件的顺序
<style>
最基本的<style>标签，其内部的样式将会作用于所有组件。
将会生成最基本的style样式
<style scoped>
具有scoped属性的<style>标签，其内部的样式只能用于当前组件和其子组件。
在编译时，将会为其中的css选择器的最后一个层次添加类似[data-v-207273bc]的属性，data-v-207273bc是vue在编译时为包含<style scoped>标签的组件添加的组件id，将会添加在组件的dom元素上（会添加到子组件的最外层元素，但不会添加到子组件的内层元素）
example:
<style scoped>
div {}
div p {}
div, p {}
p:before {}
</style>
// 将会被编译为
<style>
div[data-v-207273bc] {}
div p[data-v-207273bc] {}
div[data-v-207273bc], p[data-v-207273bc] {}
p[data-v-207273bc]:before {}
</style>
注意：我们可以在css中使用>>>，在scss中使用/deep/来改变[data-v-207273bc]属性的位置
example:
<style scoped>
div p {}
div >>> p {}
>>> p {}
p >>> {}
</style>
// 将会被编译为
<style>
div p[data-v-207273bc] {}
div[data-v-207273bc] {}
[data-v-207273bc] p {}
p[data-v-207273bc] {}
</style>
<style module>
具有module属性的<style>标签，具有以下特点：
- <style module>标签可以给module属性设置值，作为其名称
- 一个组件可以有多个<style module>标签，但其module属性值不能重复
- 标签中的大部分的样式与普通<style>标签相同，但其中的class选择器和id选择器的名称将会被编译
example:
<style module>
#id {}
.class {}
</style>
// 将会被编译为
<style>
#_v9YRgsGtR3I5AoEIMREr_2 {}
._3VYuS_9QEH8v-y4qJPvwi5_2 {}
</style>
- class选择器和id选择器的使用方式也有所不同，通过组件实例对象的属性进行访问，这意味着可以在父组件和子组件中进行使用
example:
<style module>
#id {}
.class {}
</style>
// 通过this.$style.id和this.$style.class在<script>中使用
// 通过$style.id和$style.class在<template>中使用
<style module="a">
#id {}
.class {}
</style>
// 通过this.a.id和this.a.class在<script>中使用
// 通过a.id和a.class在<template>中使用
注意
<style>标签的module/scoped属性可以和其他属性进行搭配，从而实现各种不同的组合
网友评论