济南高新区网站建设公司,网站制作哪家最好,搜索引擎优化方法案例,云端互联网站建设1、作用
在 Vue 中使用 scoped 属性可以让样式作用域仅限于当前组件中#xff0c;不影响全局#xff0c;避免了样式污染和样式冲突的问题。
在组件中使用 scoped 的方式如下#xff1a;
templatediv classexampleExample Component/div…1、作用
在 Vue 中使用 scoped 属性可以让样式作用域仅限于当前组件中不影响全局避免了样式污染和样式冲突的问题。
在组件中使用 scoped 的方式如下
templatediv classexampleExample Component/div
/templatestyle scoped
.example {color: red;
}
/style
在这个例子中.example 样式规则只会作用于当前组件内部的元素而不会影响全局的样式。 2、原理
为了达到组件样式模块化做了两个处理 ① scoped 会为每个组件的 DOM 节点添加一个唯一的 data 属性(例如: data-v-5558831a)作为标记 ② css样式上是通过 data 属性选择器[data-v-2311c06a]的方式来私有化样式。 3、编译前后
Vue中的 scoped 属性的效果主要是通过PostCss实现的。
以下是转译前的代码
templatediv classexampletest/div
/templatestyle scoped langsass.example {color:red;}
/style
转译后
.example[data-v-1121845a] {color: red;
}
templatediv classexample data-v-1121845atest/div
/template
即PostCSS 给一个组件中的所有 DOM 添加了一个独一无二的动态属性给 css 选择器额外添加一个对应的属性选择器来选择组件中的 DOM这种做法使得样式只作用于含有该属性的 DOM 元素(组件内部的 DOM)。
