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 of Vue3 style. 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

When <style> When the tag has the 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. Depth Selector

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

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

The DOM content created through v-html will 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 affect <slot/> 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 the selector:

<style scoped>
:slotted(div) {
  color: red;
}
</style>

4. Global Selector

If you want one of the style rules to be applied globally, instead of creating another <style>, you can use the :global pseudo-class. Implementation:

<style scoped>
:global(.red) {
  color: red;
}
</style>

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:

<style>
/* global styles */
</style>
 
<style scoped>
/* local styles */
</style>

6. Support CSS Modules

&lt ;style module> tag will be compiled into CSS Modules and the generated CSS class key will be exposed to the component:

1. Default is $style object Exposed to components;

<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 <script setup> through the useCssModule API:

<script setup>
import { useCssModule } from &#39;vue&#39;
 
// 默认, 返回 <style module> 中的类
const defaultStyle = useCssModule()
 
// 命名, 返回 <style module="classes"> 中的类
const classesStyle = useCssModule(&#39;classes&#39;)
</script>

##8. Dynamic CSS

The

<style> tag of a single file component can be passed v -bind This CSS function associates CSS values ​​​​with dynamic component states:

<script setup>
const theme = {
  color: &#39;red&#39;
}
</script>
 
<template>
  <p>hello</p>
</template>
 
<style scoped>
p {
  color: v-bind(&#39;theme.color&#39;);
}
</style>

(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!