网站实用性,做一个商务平台网站的费用,建设网站需要营业执照吗,赣州市南康建设局网站1. 前言
在vue3的世界里#xff0c;有一个style标签的关键字v-deep#xff0c;官网称之为样式穿透。那他究竟是什么原理呢#xff1f;又是怎么工作的呢#xff1f;让我们一起探究一下。
2. 准备工作
需要实现搭建一个vue3的环境#xff0c;我这里使用的是vitevue3的架构…1. 前言
在vue3的世界里有一个style标签的关键字v-deep官网称之为样式穿透。那他究竟是什么原理呢又是怎么工作的呢让我们一起探究一下。
2. 准备工作
需要实现搭建一个vue3的环境我这里使用的是vitevue3的架构进行研究。不会的可以自行上网了解一下。
3. scoped的作用
在了解v-deep之前我们有必要先了解一下style标签中scoped的作用。
templatediv/div
/template
script langts setup
/script
style langscss scoped
/style我们知道scoped具有作用域的意思也就是说如果在style标签中加上scope标签那么这里面书写的样式不会再其他vue文件中生效。那他的原理又是什么呢
3.1 style生效的位置
我们知道所有的vue文件中的style标签的内容最终会渲染到html文件的head中的style标签中。 如下vue代码
templatediv classcontainerspan1111/span/div
/template
script langts setup
/script
style langscss
.container{background-color: lightblue;width: 100px;height: 100px;
}
/style那么我们打开网页查看源码 再style标签中会出现一个属性data-vite-dev-id他指向的是当前样式所对应的文件路径以及属性信息。
3.2 没有scoped效果 基本和源代码的格式一样。
3.3 增加scoped效果
此时我们发现相较于源码再生成的文件的类选择器.container中多了一个[data-v-68595a3e]属性选择器这又是做什么的呢其实他是每个vue文件的文件指纹。如下图再每个vue文件template标签的html片段中每个标签都会生成一个文件指纹。我们发现container的容器中又两个文件指纹另外一个是继承了父组件的文件指纹。 这也正是scope的基本原理。再style中选择器定义了选择器.container[data-v-68595a3e]我们知道这是并且的关系满足类名.container并且包含属性data-v-68595a3e的由于文件指纹具有唯一性所以style langscss scoped中的样式只针对当前文件生效。
4. v-deep效果
4.1 v-deep原理
通过上面的讲解我们了解到scope主要通过文件指纹控制作用域范围。而针对每个样式的定义只能出现一个文件指纹。我们看如下代码
templatediv classcontainerspan1111/span/div
/template
script langts setup
/script
style langscss scoped
.container{background-color: lightblue;width: 100px;height: 100px;.abc{background-color: #fff;.def{color: red;}}
}
/style这里我们使用的是scss语法我们看一下编译后的呈现形式 通过截图我们发现会在每个样式后面都加上一个文件指纹的属性。 那我现在有个需求我想把文件指纹加到中间该怎么办呢此时v-deep就派上用途了。看下面代码
templatediv classcontainerspan1111/span/div
/template
script langts setup
/script
style langscss scoped
.container{background-color: lightblue;width: 100px;height: 100px;::v-deep.abc{background-color: #fff;.def{color: red;}}
}
/style我们发现针对后面两个样式文件指纹追加到中间了。针对中间的样式做一些解释我们知道scss语法会对嵌套的样式进行转换。
.container{.abc{}
}上面的代码转换称为.container .abc如果我们在.abc前面加上::v-deep相当于.container ::v-deep .abc。 哎我们似乎明白点什么了v-deep不就是文件指纹吗 所以我们得出一个结论 加上scoped标签就相当于在样式的末尾追加了一个v-deep style langscss scoped
.container::v-deep{background-color: lightblue;width: 100px;height: 100px;
}
/style既然v-deep可以追加文件指纹那么style如果不加scope但是样式末尾追加v-deep会生效吗
style langscss
.container::v-deep{background-color: lightblue;width: 100px;height: 100px;
}
/style很遗憾他就不认识v-deep是什么意思了。所以这里有得出一个结论 v-deep只有在scoped下才能生效。 4.2 v-deep有效性
那么他都对哪些选择器有效。
4.2.1 子选择器
在scss中相当于父元素。
style langscss scoped
.container{background-color: lightblue;width: 100px;height: 100px;::v-deep .abc{background-color: #fff;.def{color: red;}}
}
/style4.2.2 伪类和伪元素选择器
放到伪类后面
style langscss scoped
.container{background-color: lightblue;width: 100px;height: 110px;.abc{background-color: #fff;.def:hover::v-deep::after{color: red;}}
}
/style放到伪元素前面
style langscss scoped
.container{background-color: lightblue;width: 100px;height: 110px;.abc{background-color: #fff;.def:hover::after::v-deep{color: red;}}
}
/style伪元素后面再加上一个标签
style langscss scoped
.container{background-color: lightblue;width: 100px;height: 110px;.abc{background-color: #fff;.def:hover::after div::v-deep{color: red;}}
}
/style通过上面三个示例我们发现v-deep会越过伪类和伪元素选择器。
4.2.3 多个v-deep
style langscss scoped
.container{background-color: lightblue;width: 100px;height: 110px;::v-deep.abc{background-color: #fff;.def:hover::after div::v-deep{color: red;}}
}
/style第一个出现v-deep会生效后面再出现的按照样式处理。
5 案例
通过上面的讲解那他究竟有什么作用呢?下面我们通过一个案例体会他的真正作用。 再vue的世界中我们很多时候会使用第三方库比如element-ui等。如果我想该里面的样式之前好多同事会把样式放到全局中这样显而易见容易污染其他的元素,此时v-deep就会大显身手。
5.1 准备代码
我们暂时选择ant-design库作为测试。
安装ant-design yarn add ant-design-vuenext main.ts配置主要代码import Antd from ant-design-vue
import ant-design-vue/dist/reset.css
app.use(router).use(Antd).mount(#app)index.vue
templatediv classcontainera-checkbox classcheck v-model:checkedcheckedCheckbox/a-checkbox/div
/templatescript langts setup
import { ref } from vue;
const checked ref(true)
/scriptstyle langscss scoped
.container{background-color: lightblue;width: 500px;height: 510px;
}
/style此时我们看一下生成的代码片段
假如我现在有个需求想把复选框中间的蓝色变成红色很容易想到需求修改ant-checkbox-inner的样式如下代码
style langscss scoped
.container{background-color: lightblue;width: 500px;height: 510px;.check{.ant-checkbox-inner{background-color: red;}}
}
/style然而并没有生效我们看一下生成的代码 我们发现在ant-checkbox-inner后面加了一个文件指纹。而实际这是第三方库(也就是已经打包好的文件)里面的标签根本不会出现文件指纹。这样就导致我们写的样式文件不能作用于ant-checkbox-inner上。此时我们很容易想到要把样式变成全局。
style langscss
.container{background-color: lightblue;width: 500px;height: 510px;.check{.ant-checkbox-inner{background-color: red;}}
}
/style虽然样式生效了但是出现了最严重的问题它会污染到其他vue组件使用的checkbox组件。此时v-deep就登场了。代码如下
style langscss scoped
.container{background-color: lightblue;width: 500px;height: 510px;.check{::v-deep .ant-checkbox-inner{background-color: red;}}
}
/style此时我们发现样式生效了。 再看样式表发现给check加了文件指纹check是我们vue组件的标签因此编译的时候会加上文件指纹。这样就完美解决了问题。
