功能作用:
实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块。
实现原理:
可以进行观察DOM结构来发现:vue在DOM结构以及css样式上加上唯一的标记,保证唯一性来达到样式私有化,来保证不会被污染全局的作用。
使用栗子:
<template>
<div class="nav">hi</div>
</template
<style scoped>
.nav {
color: blue;
}
</style>
如上面的这个例子 上面的style样式只在下面这个组件里起作用
如果有个别样式不想只想这个组件使用可以如下:
<template>
<div class="nav">hi</div>
<div class="nav Go">hello</div>
</template
<style scoped>
.nav {
color: blue;
}
</style>
<style>
.Go {
background:yellow;
}
</style>