首页 > 其他分享 >#yyds干货盘点#Vue项目中的样式 v-deep、/deep/ 和 >>>

#yyds干货盘点#Vue项目中的样式 v-deep、/deep/ 和 >>>

时间:2023-02-14 22:33:38浏览次数:49  
标签:yyds Vue 样式 deep 组件 div 选择器 CSS

在 ​​Vue​​ 项目的开发中,很多人都因为想要限制 ​​CSS​​ 样式的作用范围(避免样式污染的问题)去使用 ​​scope​​ 属性。在实际情况中​​​​scope​​​又会限制文件样式的修改。

有很多同学是使用的 ​​Scss​​ 以及 ​​Less​​ 的,对于他们来说什么时候使用 ​​/deep/​​ 什么时候使用 ​​::v-deep​​ 是很困扰的。今天咱们来讲讲​​​/deep/​​​ 、​​​::v-deep​​​ 、>>>在什么情况下使用。

Scoped CSS的原理

先带大家看一下无设置​​Scoped​​与设置​​Scoped​​的区别在哪

无设置​​Scoped​

<div class="login">登录</div>
<style>
.login {
width: 100px;
height: 100px
}
</style>

打包之后的结果是跟我们的代码一摸一样的,没有区别。

设置​​Scoped​

<div class="login">登录</div>
<style scoped>
.login {
width: 100px;
height: 100px
}
</style>

打包之后的结果是跟我们的代码就有所区别了。如下:

<div data-v-257dda99b class="login">登录</div>
<style scoped>
.login[data-v-257dda99b] {
width: 100px;
height: 100px
}
</style>

我们通过上面的例子,不难发现多了一个data-v-hash属性,也就是说加了scoped,PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom——组件内部dom,可以使得组件之间的样式不互相污染。


讲完这些,咱们来看看样式穿透问题。


深度作用选择器原理

如果你希望 scoped 样式中的一个选择器能够选择到子组 或 后代组件中的元素,我们可以使用 ​​深度作用选择器​​,它有三种写法:

  • ​>>>​​,示例: ​​.gby div >>> #dyx p​
  • ​/deep/​​,示例: ​​.gby div /deep/ #dyx p​​ 或 ​​.gby div/deep/ #dyx p​
  • ​::v-deep​​,示例: ​​.gby div::v-deep #dyx p​​ 或 ​​.gby div::v-deep #dyx p​

它的原理与 Scoped CSS 的原理基本一样,只是第3步有些不同(前2步一样),具体如下:

  1. 为每个组件实例(注意:是组件的实例,不是组件类)生成一个能唯一标识组件的标识符,我称它为实例标识,记作 InstanceID;
  2. 给组件模板中的每一个标签对应的Dom元素(组件标签对应的Dom元素是该组件的根元素)添加一个标签属性,格式为 ​​data-v-实例标识​​,示例:​​<div data-v-e0f690c0="" >​​;
  3. 给组件的作用域样式 ​​<style scoped>​​ 的每一个深度作用选择器前面的一个选择器单元增加一个属性选择器​​[data-v-实例标识]​​ ,示例:假设原选择器为 ​​.cls #id >>> div​​,则更改后的选择器为 ​​.cls #id[data-v-e0f690c0] div​​;

因为Vue不会为深度作用选择器后面的选择器单元增加 属性选择器​​[data-v-实例标识]​​,所以,后面的选择器单元能够选择到子组件及后代组件中的元素;

​在 ​​​Vue2​​ 版本中:

  • 如果你是使用的 ​​Stylus​​​ 以及 ​​CSS​​ 那么不用考虑直接使用 ​​CSS​​ 所支持的 ​​>>>​​ 来穿透就可以了。
  • 如果说你使用的是 ​​Less​​​ 以及 ​​Sass​​ 的话,那么推荐使用 ​​::v-deep​​ 来实现样式穿透的效果。

为什么不使用 ​​/deep​​ 呢,因为现在的 ​​Sass​​ 默认安装的是 ​​dart-sass​​ 如果你使用 ​​/deep/​​ 会提示错误:​​SassError: expected selector. /deep/​​,所以直接使用 ​​::v-deep​​ 预防可能会出现的问题。

并且最好不要直接使用 ​​::v-deep​​ 等样式穿透来书写,比如说:

<style scoped lang="scss">
::v-deep .className {
...
}
</style>

这样的话,其实就和你没有添加 ​​scope​​ 的结果是一样的了,并不会只限制在当前组件内。而会污染到全局样式当中。
并且直接使用 ​​/deep/ .className​​ 可能无法通过 ​​loader​​ 的编译。

如果说你使用的是 ​​Vue3​​​ 的话,就需要把 ​​::v-deep​​ 替换成 ​​:deep()​​ 了

一般都会提供一个 ​​custom-class​​ 给你使用,可以借助这个来起一个 ​​className​​ 来给它们添加样式,或者可以直接使用 ​​class​​ 来给当前页面中的弹窗元素起一个CSS类名。
然后写在全局就可以了,没有必要通过样式穿穿透来覆写。当然也可以写在 ​​scope​​ 内,因为第一级会被添加上当前组件的 ​​hash​​ 值。来起到限制作用域的要求。

标签:yyds,Vue,样式,deep,组件,div,选择器,CSS
From: https://blog.51cto.com/u_11365839/6057447

相关文章

  • 【Vue】style和class 列表渲染 使用v-for进行循环 监控失效 双向数据绑定 过滤案例 事
    目录昨日回顾style和classclass属性的三种设置方法style属性的三种设置方法条件渲染列表渲染使用v-for进行循环循环数字循环字符串循环对象循环数组标签key值加速虚拟dom的......
  • vue-基本语法、指令、渲染
    1.vue介绍1.Vue是一套用于构建用户界面的渐进式框架。2.M-V-VM架构思想: M:Model数据层js的数据 V:View视图层html,css VM:ViewModelvue做出来的介于M和V之......
  • VueCLI商城项目开发纪实
    Home页第一个板块新闻板块新闻板块是Home组件中的一个子组件创建importnewsComponentfrom'../src/components/home/newsComponent.vue'1.配置路由信息{path:"/home/n......
  • vue_day02
    今日内容1插值语法1.1mvvm演示<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></sc......
  • vue框架2
    插值语法mvvm演示<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></script></head>......
  • vue-day01——前端发展历史、vue的介绍及基本使用
    目录今日内容详细一、前端发展历史二、Vue的介绍与基本使用1.Vue简介2.Vue特点3.M-V-VM思想4.组件化开发、单页面开发5.版本选择6.引入方式7.简单使用8.补充今日内容详细......
  • VUE简介/插值/属性/文本/函数指令/if/for操作
    VUE简介/插值/属性/文本/函数指令前端发展史1.前后端一体的,HTML(5)、CSS(3)、JavaScript(ES5、ES6):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板......
  • 前端之——vue day02 文本、事件、属性、条件渲染、列表渲染指令,class和style在vue中
    一、插值语法补充1.vue没有get,对象取值可以用句点,也可以【'K'】2.vue里数组取值,直接索引拿3.三目运算符​ 和Python三元有略微差别,Py的是结果一if条件else结果二......
  • Vue开发
    前端发展历史1、HTML(5)、CSS(3)、JavaScript(ES5、ES6):编写一个个的页面发送给后端(PHP、Python、Go、Java),后端嵌入模板语法进行渲染,渲染完数据后返回给前端方便在浏览......
  • #yyds干货盘点# LeetCode程序员面试金典:变位词组
    题目:编写一种方法,对字符串数组进行排序,将所有变位词组合在一起。变位词是指字母相同,但排列不同的字符串。注意:本题相对原题稍作修改示例:输入:["eat","tea","tan","ate"......