Let’s talk about the new features in Vue3 style (summary)

Vue3 has upgraded the style style. The following article will summarize and share with you the new features ofVue3style. I hope it will be helpful to everyone!

The setup function introduced after Vue3.0 develops Vue components like writing JS. In addition, style also adds many new features, such as the introduction of variables and functions, making css More reusable...

style new features

The Vue3.2 version improves the style of single-file components Many upgrades have been made, such as local styles, css variables, and styles exposed to templates. (Learning video sharing:vue video tutorial)

1. Partial style

Whenc9ccee2e6ea535a969eb3f532ad9fe89When the tag has thescopedattribute, its CSS will only be applied to the elements of the current component:

2. Depth Selector

If you want to make a more "deep" selection with a selector in thescopedstyle, that is: To affect sub-components, you can use the:deep()pseudo-class:

The DOM content created throughv-htmlwill not be scoped Styling effects, but you can still style it using the depth selector.

3. Slot Selector

By default, the scope style will not affect38b537b6886351ac721d89624ba185caRendered content, because they are considered to be held and passed in by the parent component. Use the:slottedpseudo-class to exactly target the slot contents as the selector:

4. Global Selector

If you want one of the style rules to be applied globally, instead of creating anotherc9ccee2e6ea535a969eb3f532ad9fe89, you can use the:globalpseudo-class. Implementation:

5. Mix local and global styles

You can also use both local and global styles in the same component Contains scoped styles and non-scoped styles:

6. Support CSS Modules

< ;style module>tag will be compiled intoCSS Modulesand the generated CSS class key will be exposed to the component:

1. Default is$styleobject Exposed to components;

2. You can customize the injected module name

7. Use it with setup

The injected class can be used insetup()and5101c0cdbdc49998c642c71f6b6410a8through theuseCssModuleAPI:

##8. Dynamic CSS

The

c9ccee2e6ea535a969eb3f532ad9fe89tag of a single file component can be passedv -bindThis CSS function associates CSS values with dynamic component states:

(End)

(Learning video sharing:web front-end development,Basic programming video)

The above is the detailed content of Let’s talk about the new features in Vue3 style (summary). For more information, please follow other related articles on the PHP Chinese website!