.vue组件 css私有作用域（scoped）

写在前面：在vue项目中，css私有作用域的实现方法为在<style>标签中添加scoped属性。

css样式只作用于当前组件的两个分类：

1. 在当前.vue页面中写css，写法如下：

<template>
  <div class="example">hi</div>
</template>


<style scoped>
.example {
  color: red;
}
</style>

2.在当前.vue页面中引入css文件，写法如下：

<style scoped src="../../assets/css/index.css">
/*import引入的方式会导致该css文件的样式变为全局样式 */
/* @import '../../assets/css/index.css'; */
</style>

拓展一下：

1.同一个组件中同时使用有作用域和无作用域的样式。

<style>
/* 全局样式 */
</style>

<style scoped>
/* 当前页面样式 */
</style>

2.检测样式为全局还是私有样式（进到浏览器，F12）