Vue中style的scoped属性以及穿透方法

WEB前端

Vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,局部有效。如果一个项目中的所有vue组件style标签全部加上了scoped,相当于实现了样式的私有化。如果引用了第三方组件,需要在当前组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过穿透scoped的方式来解决,选择器>>>。下面PHP程序员雷雪松详细的介绍一下vue中style的scoped属性以及穿透方法。

1、scoped的实现原理
Vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的Vue代码:

1
2
3
4
5
6
7
8
9
<template>
<div class="scoped">Vue.js scoped</div>
</template>

<style scoped>
.scoped {
font-size:14px;
}
</style>

浏览器渲染后的代码:

1
2
3
4
<div data-v-fed36922 class="scoped">Vue.js scoped</div>
.scoped[data-v-fed36922]{
font-size:14px;
}

即:PostCSS给所有dom添加了一个唯一不重复的动态属性,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式私有化。

2、Vue中style属性为scoped如何穿透?

1
2
3
4
5
<style scoped>
选择器 >>> 第三方组件选择器 {

}
</style>

PHP程序员雷雪松个人感觉,在Vue中style属性为scoped使用穿透解决实际问题其实是怕不得已之举,和scoped初衷是相违背的。尽量避免这样的问题出现。WEB前端开发变化最快,经常会有新的框架,新的开发思想。从以前的JQuery到现在的Vue,从以前只是实现页面简单交互到现在各种丰富的开发库,NodeJS的出现使js不仅能做前端效果,也可以用在可以用来开发后台大型的项目。对于我们程序员开发来说,只有保持一颗不断学习的心态,才能不被前端开发这个行业淘汰。

来源:Vue中style的scoped属性以及穿透方法

5 评论 “Vue中style的scoped属性以及穿透方法

    跨境卖家导航 评论:
    2018年8月21日 下午10:17

    新手学习了~~

    Kirk Esparza 评论:
    2019年2月6日 下午3:25

    http://www.seopojie.com – SEO破解工具站是专注于英文SEO工具,英文网站优化技术,搜索引擎优化软件教程,以及外贸网站优化推广软件分享和下载的网站.站点内容每天都在更新英文SEO工具下载和分享.

    英文网站优化软件
    社交媒体工具
    网站推广工具
    Long Tail Pro
    Lynda教程
    Screaming Frog SEO Spider
    英文SEO工具下载站
    英文SEO综合工具
    博客工具
    IBP
    账号注册工具
    外链列表

    纽约网站设计 评论:
    2019年3月11日 下午11:37

    vue在中国比较流行在国外则是angular.js比较流行。不过多学没坏处

    拱猪游戏 评论:
    2019年3月28日 上午9:23

    学习了。

    61o 评论:
    2019年5月9日 下午11:57

    虽然不知道说的是什么,但看起来好厉害的样子!

发表评论

电子邮件地址不会被公开。 必填项已用*标注