Home > Article > Web Front-end > What are the new features in Vue3 style and how to use them
The Vue3.2 version has made many upgrades to the style of single-file components, such as local styles, css variables and Styles are exposed for template use, etc. (Learning video sharing: vue video tutorial)
1. Partial style
Whenc9ccee2e6ea535a969eb3f532ad9fe89
tag has scoped
attribute, its CSS will only be applied to the elements of the current component:
<template> <div class="example">hi</div> </template> <style scoped> .example { color: red; } </style>
2. The depth selector
is in scoped
If the selector in the style wants to make a more "deep" selection, that is, affect sub-components, you can use :deep()
this pseudo-class:
<style scoped> .a :deep(.b) { /* ... */ } </style>
DOM content created with
v-html
will not be affected by scoped styles, but you can still style it using depth selectors.
3. Slot selector
By default, the scope style will not affect 38b537b6886351ac721d89624ba185ca
Rendered content because they are considered to be held and passed in by the parent component. Use the :slotted
pseudo-class to exactly target the slot content as the selector:
<style scoped> :slotted(div) { color: red; } </style>
4. Global selector
If you want To apply one of the style rules globally, instead of creating another c9ccee2e6ea535a969eb3f532ad9fe89
, you can use the :global
pseudo-class:
<style scoped> :global(.red) { color: red; } </style>
5. Mix local and global styles
You can also include both scoped and non-scoped styles in the same component:
<style> /* global styles */ </style> <style scoped> /* local styles */ </style>
6. Support CSS Modules
a6167d77ee734aaef6dcd2aa69de7b33
tags will be compiled into CSS Modules and the generated CSS class keys will be exposed to the components:
1. The default is $style
The object is exposed to the component;
<template> <p :class="$style.red"> This should be red </p> </template> <style module> .red { color: red; } </style>
2. You can customize the injected module name
<template> <p :class="classes.red">red</p> </template> <style module="classes"> .red { color: red; } </style>
7. Use it with setup
The injected class can be used in setup()
and 5101c0cdbdc49998c642c71f6b6410a8
through useCssModule API:
<script setup> import { useCssModule } from 'vue' // 默认, 返回 <style module> 中的类 const defaultStyle = useCssModule() // 命名, 返回 <style module="classes"> 中的类 const classesStyle = useCssModule('classes') </script>
8. Dynamic CSS
The c9ccee2e6ea535a969eb3f532ad9fe89
tag of a single-file component can associate CSS values to dynamic component state through the v-bind
CSS function:
<script setup> const theme = { color: 'red' } </script> <template> <p>hello</p> </template> <style scoped> p { color: v-bind('theme.color'); } </style>
The above is the detailed content of What are the new features in Vue3 style and how to use them. For more information, please follow other related articles on the PHP Chinese website!