What is the dynamic variable injection of <style> mentioned by Youda in the ecological progress of Vue?

Author: Fernando Doglio
Translator: Frontend Xiaozhi
Source: medium

If you have dreams and dry goods, search on [Great Move to the World] Follow this brushing wit who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

In the Vue RFC there is a proposal SFC style CSS variable injection on styles. This RFC provides a way for Vue developers to use component responsive data as CSS variables.

In Vue 3, we can update the style at runtime with a simple syntax.

In this article, we will learn how to use these SFC styles, how it works, and then learn some advanced knowledge from RFC.

The main content of this article:

1. How to use SFC style?

2. Responsive style in Vue
3. How Vue SFC style variables work
4. Some knowledge to know
   1. CSS variables are not available in child components
   2. Check the browser support before use
5. .Summarize

Single File Component: Single file component, referred to as SFC

How to use SFC style?

To use this feature, only two steps are required:

1. Declare a reactive variable in script
2. v-bind in css to use this variable.

Here is a millet:

<template>
<div>
  <div class="text">hello</div>
</div>
</template>

<script>
export default {
    data() {
        return {
            color: 'red',
        }
    }
}
</script>

<style>
.text {
    color: v-bind(color);
}
</style>

It's very simple.

If you look at the component in the browser, you can see that the element correctly obtains its color value from the data

This also applies to more complex data structures, suppose we have an fontStyles , which has an attribute of weight

We still use v-bind access it, but because we are passing an object, we need to use a JS expression to access this internal property, and we need to enclose the expression in quotation marks.

<template>
<div>
  <div class="text">hello</div>
</div>
</template>

<script>
export default {
    data() {
        return {
            color: 'red',
            font: {
                weight: '800'
            }
        }
    }
}
</script>

<style>
.text {
    color: v-bind(color);
    /* wrapped in quotes */
    font-weight: v-bind('font.weight');
}
</style>

2. Responsive style in Vue

Whether we use JS expressions or just root-level data binding, we can use Vue's built-in responsiveness to update styles at runtime.

Suppose we want to be able to use a button to change the color of the text, we can do so.

<div>
  <div class="text">hello</div>
  <button @click="color = 'blue'"> Make Blue </button>
</div>

All we have to do is to change the corresponding variable value, and the CSS style will update itself. This is why this feature is so powerful, it provides us with a clean way to modify the appearance of the page at runtime.

How Vue SFC style variables work

After understanding how to use it, let's take a look at how Vue does it. If we examine the elements, we can better understand how Vue works its magic.

Any variables referenced in our style section are added to the root element of the component as an inline style.

Write like ordinary CSS, we declare the CSS variable -015c408c-color and set it to red , and set the variable --015c408c-font_weight to 800 .

element.style { /* root element */
    --015c408c-color: red;
    --015c408c-font_weight: 800;
}

.text {
    color: var(--015c408c-color);
    font-weight: var(--015c408c-font_weight);
}

Then it is to convert v-bind to use CSS variables.

Then, whenever the responsive data changes

• Our inline style has changed, which means...
• Our CSS variables have changed, which means...
• The final style is changed to the new value of responsive

This is how to update the style at runtime like color does above.

CSS variables are not available in child components

To avoid inheritance problems, the defined CSS variable is not available to any of its child components.

For example, if we add a child component to an existing component.

<template>
<div>
  <div class="text">hello</div>
  <button @click="color = 'blue'"> Make Blue </button>
  <child-component />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
    components: {
        ChildComponent
    },
    data() {
        return {
            color: 'red',
            font: {
                weight: '800'
            }
        }
    }
}
</script>

<style>
.text {
  color: v-bind(color);
    /* expressions (wrap in quotes) */
    font-weight: v-bind('font.weight');
}
</style>

Assume that the subcomponent is constructed like this.

<template>
    <div class="child-text"> Child Component </div>
</template>

<style>
    .child-text {
        color: v-bind(color);
    }
</style>

This will not change the color, because our child component does not know any CSS variables.

Check browser support before use

If you want your project to use this feature, you need to check the browser's support for CSS variables

Summarize

This is a very interesting feature, similar to the script setup grammar we talked about last time. It will eventually go out of the experimental stage and be incorporated into Vue 3.

Using Vue for CSS variables and SFC style variables is an intuitive way to add responsive styles to Vue components.

Great, looking forward to it!

~End, I’m Shuwanzhi, and I’m going to the SPA, see you next time!

---

Original: https://learne.co/2021/05/how-to-use-vue-css-vaiables-reactive-styles-rfc/

---

possible bugs of 161283210d97b2 code after deployment cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://learue.co/2020/01/a-vue-event-hanling-cheatsheet-the-essentials/

comminicate

If you have dreams and dry goods, search on [Moving to the World] Follow this brushing wit who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.