一. CSS相干动漫 色情
(详见官网：https://cn.vuejs.org/api/sfc-css-features.html)
1. scoped作用域
(1). 当 <style> 标签带有 scoped attribute 的期间，它的 CSS 只会影响刻下组件的元素
旨趣：在标签上生成一个 data-xxxx 属性，通过该属性杀青惟一性，详见截图
图片
(2). 使用 scoped 后，父组件的样式将不会渗入到子组件中。不外，子组件的根节点会同期被父组件的作用域样式和子组件的作用域样式影响
A. 子组件的根节点会收父组件的影响，非根节点不是影响。
要是子组件child1中最外层div的类名也叫box1，则会被父组件的样式替代
cphi制药在线要是子组件child1中非外层div的类名也叫box1，则不受父组件影响
B. 子组件被添加两个 data-xxx属性 <div class='childbox1' data-v-c74b84a5='' data-v-beda6b21=''>我是子组件</div>
<template><h2>测试作用域scoped</h2><br /><div class='box1'>我是box1</div><br /><child1></child1></template><script setup>import child1 from '@/components/child1.vue';</script><style scoped>.box1 { width: 200px; height: 200px; background-color: pink; color: black;
}</style>2. 选拔器动漫 色情
(1) :deep() 深度选拔器，不错径直选中组件中的内容
(2) :global() 全局选拔器，是以声明的样式组件中也会奏效
要是思让其中一个样式司法欺诈到全局，比起另外创建一个 <style>，不错使用 :global 伪类来杀青
(3) :slotted() 插槽选拔器
默许情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被合计是父组件所握有并传递进来的
注：这里是指在子组件中写样式，对父组件插槽渲染出来的内容奏效！！！
(4) 全局样式和局部样式混用
<style>/* 全局样式 */</style><style scoped>/* 局部样式 */</style>父页面代码：稽查代码
<template><h2>测试选拔器</h2><br /><div class='box1'>我是box1</div><br /><child1> <div class='box3'>我是插槽中的默许内容</div></child1></template><script setup>import child1 from '@/components/child1.vue';</script><style scoped>.box1 { width: 200px; height: 200px; background-color: pink; color: black;
}/* 深度选拔器 *//* :deep(.box2) {
font-weight: bold;
font-size: 20px;
color: red;
} *//* 全局选拔器 */:global(.box2) { font-weight: bold; font-size: 20px; color: red;
}</style><style>/* 全局样式 *//* .box2 {
font-weight: bold;
font-size: 20px;
color: red;
} */</style>子组件代码：稽查代码 <template><div class='childbox1'>
我是子组件 <div class='box1'>我是子组件的内容1</div><div class='box2'>我是子组件的内容2</div><slot> </slot></div></template><script setup></script><style scoped>.childbox1 { width: 200px; height: 300px; background-color: bisque; color: green;
}/* 插槽选拔器 */:slotted(.box3) { font-weight: bold; font-size: 28px; color: pink;
}</style>3. css module
(1). 一个 <style module> 标签会被编译为 CSS Modules 况且将生成的 CSS class 手脚 $style 对象涌现给组件。 (普通的说：便是template 和 script中不错径直赢得 css的类对象)
注：得出的 class 将被哈希化以幸免梗概，杀青了相同的将 CSS 仅作用于刻下组件的服从。
(2). 不错通过 useCssModule API 在 setup() 和 <script setup> 中窥探注入的 class。
(3). 另外module还不错自界说称号，比如 <style module='ypf'>
A. template中调用则：<div :class='ypf.box1'>我是box1</div>
B. script中调用则：let myObj = useCssModule('ypf');
稽查代码 <template><h2>测试CSS Module用法</h2><br /><div :class='$style.box1'>我是box1</div><br /></template><script setup>import { useCssModule } from 'vue';// 默许情况下， 复返 <style module> 的 classlet myObj = useCssModule();console.log(myObj); //{box1: '_box1_l659s_19'}</script><style module>.box1 { width: 200px; height: 200px; font-weight: 600; background-color: pink; color: white;
}</style>4. v-bind
(1). 复旧反应式
(2). 对象属性的形貌需要加引号；单独的变量引号可加可不加
(3). 本色的值会被编译成哈希化的 CSS 自界说属性，因此 CSS 自己仍然是静态的。自界说属性和会过内联样式的方式欺诈到组件的根元素上，况且在源值变更的期间反应式地更新。
<script setup>import { reactive， ref } from 'vue';let myTheme = reactive({ bgColor: 'green'，
});let myColor = ref('white');const test1 = () => {
myTheme.bgColor = 'pink';
myColor.value = 'yellow';
};
</script><style scoped>.box1 { width: 200px; height: 200px; /* background-color: pink; *//* color: wheat; *//* 对象属性的形貌需要加引号 */background-color: v-bind('myTheme.bgColor'); /* 单独的变量引号可加可不加 */color: v-bind(myColor);
}</style>二. Less的使用
在Vue形态中，需要通过npm安设相干包(成就依赖即可)
【npm install less -D】【npm install less-loader -D】然后径直使用即可：动漫 色情
<style scoped lang='less'>.box1 { width: 400px; height: 400px; background-color: antiquewhite; .childBox { width: 200px; height: 200px; background-color: aqua;
}
}
</style>三. Sass的使用
在Vue形态中，需要通过npm安设相干包(成就依赖即可)
【npm install sass -D】【npm install sass-loader -D】然后径直使用即可：
<style scoped lang='scss'>.box1 { width: 400px; height: 400px; background-color: antiquewhite; .childBox { width: 200px; height: 200px; background-color: aqua;
}
}
</style>
本站仅提供存储作事，悉数内容均由用户发布，如发现存害或侵权内容，请点击举报。