Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what are the new features in Vue3 style and how to use them". In daily operation, I believe many people have doubts about what are the new features in Vue3 style and how to use them. I have consulted all kinds of information and sorted out simple and easy operation methods. I hope to help you answer the doubts about "what are the new features in Vue3 style and how to use them"! Next, please follow the small series to learn together!

style New features

Version 3.2 of Vue3.2 includes many upgrades to style for single-file components, such as local styles, css variables, and styles exposed to templates. (Learn video sharing: vue video tutorial)

I. Local Style

When a tag has a scoped attribute, its CSS is applied only to elements of the current component:

hi .example { color: red;}

II. Depth selector

Selectors in scoped style If you want to make a more "deep" selection, i.e., affect subcomponents, you can use the pseudo-class:deep():

.a :deep(.b) { /* ... */}

DOM content created via v-html is not affected by scoping styles, but you can still style it using the depth selector.

III. Slot selector

By default, scoping styles do not affect 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 contents as selectors:

:slotted(div) { color: red;}

IV. Global selector

If you want one of these style rules to apply globally, rather than creating another, you can do this using the:global pseudo-class:

:global(.red) { color: red;}

V. Mixed use of local and global styles

You can also include both scoped and non-scoped styles in the same component:

/* global styles */ /* local styles */

Support CSS Modules

The tag is compiled into CSS Modules and exposes the generated CSS class keys to the component:

1. By default,$style objects are exposed to components;

This should be red

.red { color: red;}

2. You can customize the injection module name

red

.red { color: red;}

7. Used with setup

Injected classes can be used in setup() and via the useCssModule API:

import { useCssModule } from 'vue' //default, return class const defaultStyle = useCssModule() //name, return class const classesStyle = useCssModule ('classes ')

VIII. Dynamic CSS

The tag of a single-file component can associate CSS values to dynamic component states via the CSS function v-bind:

const theme = { color: 'red'}

hello

p { color: v-bind ('theme. color');} At this point, the study of "What are the new features in Vue3 style and how to use them" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.