局部樣式
1.Vue中style標簽的scoped屬性表示它的樣式只作用于當前模塊，是樣式私有化.
2.渲染的規(guī)則/原理：
給HTML的DOM節(jié)點添加一個 不重復(fù)的data屬性 來表示 唯一性
在對應(yīng)的 CSS選擇器 末尾添加一個當前組件的 data屬性選擇器來私有化樣式袜漩，如：.demo[data-v-2311c06a]{}
如果引入 less 或 sass 只會在最后一個元素上設(shè)置
// 原始代碼
<template>
<div class="demo">
<span class="content">
Vue.js scoped
</span>
</div>
</template>
<style lang="less" scoped>
.demo{
font-size: 16px;
.content{
color: red;
}
}
</style>
// 瀏覽器渲染效果
<div data-v-fed36922>
Vue.js scoped
</div>
<style type="text/css">
.demo[data-v-039c5b43] {
font-size: 14px;
}
.demo .content[data-v-039c5b43] { //.demo 上并沒有加 data 屬性
color: red;
}
</style>
deep 屬性
// 上面樣式加一個 /deep/
<style lang="less" scoped>
.demo{
font-size: 14px;
}
.demo /deep/ .content{
color: blue;
}
</style>
// 瀏覽器編譯后
<style type="text/css">
.demo[data-v-039c5b43] {
font-size: 14px;
}
.demo[data-v-039c5b43] .content {
color: blue;
}
</style>
