style标签学习

最新推荐文章于 2024-09-20 15:16:38 发布

. 泊。

最新推荐文章于 2024-09-20 15:16:38 发布

阅读量719

点赞数

分类专栏：笔记文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/qq_51325797/article/details/129102200

版权

笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

3种不同的<style>

<style>
<style scoped>
<style module>

`<Style>`

对单个组件，按照<style>出现的顺序插入<head>
遍历组件的子组件，依次对子组件执行步骤1，在开发时执行的顺序按照子组件在template中出现的顺序，生产构建时执行的顺序按照引入子组件的顺序
最基本的<style>标签，其内部的样式将会作用于所有组件。将会生成最基本的style样式

<style module>

<style module>这个 module 特性指引 Vue Loader 作为名为 $style 的计算属性，向组件注入 CSS Modules 局部对象。
可在模板中通过一个动态类绑定来使用它，因为 $style 是一个计算属性，所以它也支持绑定class的 :class 对象/数组语法：

<template>
  <div>
    <p :class="$style.red">我是一段文字</p>
    <p>我也是一段文字</p>
  </div>
</template>
<style module>
.red {
  color: red;
}
</style>

在这里插入图片描述在一个vue文件中，可定义多个style标签 ,可自定义的注入名称

<template>
  <div>
    <p :class="cssModuleA.red">我是一段文字</p>
    <p :class="cssModuleB.blue">我也是一段文字</p>
  </div>
</template>

<style module="cssModuleA">
/* CSS Modules： */
.red {
  color: red;
}
.blue {
  color: blue;
  border: 1px solid green; /* 该样式也会被用上 */
}
</style>
<style module="cssModuleB">
.blue {
  color: rgb(14, 187, 245); /* 覆盖了上面的blue样式 */
  font-weight: 600;
  font-size: 20px;
}
</style>

在这里插入图片描述

<style scoped>

具有scoped属性的<style>标签，其内部的样式只能用于当前组件和其子组件。
在编译时，将会为其中的css选择器的最后一个层次添加类似[data-v-207273bc]的属性，data-v-207273bc是vue在编译时为包含<style scoped>标签的组件添加的组件id，将会添加在组件的dom元素上（会添加到子组件的最外层元素，但不会添加到子组件的内层元素）
参考链接：
https://blog.csdn.net/ddx2019/article/details/109031594
https://www.jianshu.com/p/c1d1577a704f