vue3 布局样式的原理

style scoped

<style scoped > 它的 CSS 只作用于当前组件中的元素，如果子组件只有一个根元素，也会被渗透
原理：
当我们再组建中使用scoped时，vue会自动为组件中所有元素生成一个随机的属性，形如：data-v-7a7a37b1，生成后，所有的选择器都会在最后添加一个[data-v-7a7a37b1],
.box -》box[data-v-7a7a37b1]，

<template><div class="box"><p>我是父组件</p></div>
</template>
<style scoped>.box{background:#ccc;}
</style>

注意：随机生成的属性，除了会添加到当前组件内所有元素上，也会渗透当前组件引入的其它组件的根元素上(单根情况会，多根情况不会渗透)，这样设计是为了，可以通过父组件来为子组件设置一些样式

:deep

希望将组件和引入的组件中的某个元素字体都设置为黄色
这时候用到 :deep()
父组件

<template><div class="box"><p>我是父组件</p><stylechild></stylechild></div>
</template><script setup lang="ts">
import stylechild from '../components/StyleChild.vue'
</script><style scoped>.box :deep(p){color: blue;}   /*没加deep之前 子组件不会变蓝，加上之后就会变蓝了*/
</style>

子组件

<template><div><p>我是子组件</p></div>
</template>

:global

全局选择器 :global(div)，如果给div设置样式，全局的div都会渗透这个样式
也可以新增一个
s

style module

css模块module，会自动的对模块中的类名进行hash化来确保类名的唯一性

<template><div :class="$style.box"><p>我是父组件</p><stylechild></stylechild></div>
</template><style module>.box {color: blue;}   /*没加deep之前 子组件不会变蓝，加上之后就会变蓝了*/
</style>

module也可以指定一个名称，默认用$style，加入module = “classssss”
使用 classssss.box

vue3 布局样式的原理相关推荐

Android面试收集录12 View测量、布局及绘制原理
一.View绘制的流程框架 View的绘制是从上往下一层层迭代下来的.DecorView-->ViewGroup(--->ViewGroup)-->View ,按照这个流程从上往下, ...
【RecyclerView】九、为 RecyclerView 设置不同的布局样式
文章目录一.为 RecyclerView 设置不同的布局样式二.完整代码三.RecyclerView 相关资料一.为 RecyclerView 设置不同的布局样式为 RecyclerView ...
Vue3的响应式原理解析
Vue3的响应式原理解析 Vue2响应式原理回顾 // 1.对象响应化:遍历每个key,定义getter.setter // 2.数组响应化:覆盖数组原型方法,额外增加通知逻辑 const origi ...
div css网页设计源代码_HTML+CSS网页设计，企业网站服务项目布局样式
大家好,本篇文章分享企业网站服务项目的布局样式,这种布局样式通常用于企业网站首页,企业可以向客户提供的服务内容,不同类型的企业服务项目样式也不同,这只是其中一种. 效果图: 服务项目 HTML代码: ...
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理) - willian12345...
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理) - willian12345 时间 2014-02-20 17:58:00 博客园-原创精华区原 ...
div css网页设计源代码_HTML+CSS网页设计，企业网站资讯文章布局样式
大家好,本篇文章分享企业网站资讯文章的布局样式,这种布局样式通常用于企业网站首页. 效果图: 资讯文章 HTML代码: 最新资讯 Newest information 高效简洁但稳定实用的网站程序20 ...
前端比较好用的一个Flex布局样式包
前端比较好用的一个Flex布局样式包 https://gitee.com/chendaiming/flex_layout
Vue2和Vue3的双向数据绑定原理
目录前言: vue2.x 是如何实现响应式系统的: defineProperty 的痛点: Object.defineProperty 代码的使用 Proxy 方法的理解 Proxy 代码的使用: ...
CSS非布局样式和重点内容
CSS基础非布局样式 Cascading Style Sheet 层叠 .样式.表可以简单理解为PS中图层的样式和叠加选择器 selecter{prop:value; } 选择器用于匹配HTML元 ...