每日总结
vue scoped属性
概念
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>
用法
直接在style标签里面写样式
<style scoped>
.header {
font-size: 18px;
}
</style>
外部引入样式
<style src="../../assets/css/home.css" scoped>
</style>
注意
1.
<style scoped>
@import '../../assets/css/home.css';
</style>
/*这样写的话import的css文件会被编译为全局样式，但是引入less等预编译文件，就会局部生效*/
2.
<style src="../../assets/css/home.css" scoped>
</style>
/*这样写的css文件中的样式只能在本组件中使用，而不会影响其他组件*/
