current position:Home>Especially mentioned in Vue's ecological progress & lt; style> What is dynamic variable injection?

Especially mentioned in Vue's ecological progress & lt; style> What is dynamic variable injection?

2021-08-26 15:47:00 Front end Xiaozhi

author :Fernando Doglio
translator : The front end little wisdom
source :medium

Have dreams , There are dry goods , WeChat search 【 The big move the world 】 Pay attention to this dish washing wisdom who is still washing dishes in the early morning .

this paper GitHub https://github.com/qq449245884/xiaozhi Included , There is a complete interview site for a large factory 、 Materials and my series .

stay Vue RFC There is a proposal for style in SFC style CSS variable injection, This RFC by Vue Developers provide a way to use the responsiveness data of components as CSS Variable method .

stay Vue 3 in , Just a simple syntax , We can update the style at run time .

In this paper , We'll learn how to use these SFC style , How it works , Then learn something from RFC Advanced knowledge of .

Main contents of this paper :

1. How to use SFC style ?

  1. Vue Responsive styles in
  2. Vue SFC How style variables work
  3. Some knowledge you need to know
    1.CSS Variables are not available in subcomponents
    2. Check browser support before use
  4. . summary
Single File Component : Single file component , abbreviation SFC

How to use SFC style ?

To use this feature , There are only two steps :

  1. In the component's script Declare a responsive variable in .
  2. stay css Use in v-bind To use this variable .

Have a corn :

<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 simple .

If you view components in the browser , You can see that the element correctly obtains its color value from the data

image.png

This also applies to more complex data structures , Suppose we have a name fontStyles The object of , One of the objects weight Properties of .

We still use v-bind Visit it , But because we pass an object , So we need to use JS Expression to access this internal property , And you 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>
  1. Vue Responsive styles in

Whether we use JS Expressions still use only root level data binding , We can all use Vue The built-in response updates the style at run time .

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

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

All we have to do is change the value of the corresponding variable ,CSS The style will update itself . That's why this feature is so powerful , It provides us with a clean way to modify the appearance of the page at run time .

Vue SFC How style variables work

After knowing how to use , Let's see Vue How to do it . If we check the elements , We can better understand Vue How to work its magic .

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

image.png

Like ordinary CSS Write like that , We declare CSS Variable -015c408c-color, And set it to red, Put the variable --015c408c-font_weight, Set to 800.

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

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

And then it's going to be v-bind Convert to use CSS Variable mode .

image.png

then , Whenever the responsiveness data changes

  • Our inline style has changed , It means ...
  • our CSS The variable changes , It means ...
  • The final style changes to the new value of the response

This is how to update styles at run time, like the above color It's like that .

CSS Variables are not available in subcomponents

To avoid inheritance problems , Defined CSS Variable is not available to any of its subcomponents .

for example , If we add a sub 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>

Suppose the subcomponents are built like this .

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

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

It doesn't change the color , Because our subcomponents don't know anything CSS Variable .

image.png

Check browser support before use

If you want the project to use this feature , You need to check the browser for CSS Support of variables

image.png

summary

This is a very interesting feature , Similar to what we said last time script setup grammar , It will eventually go out of the experimental stage , Merge into Vue 3 in .

take Vue be used for CSS Variables and SFC The style variable is directed to Vue An intuitive way to add responsive styles to components .

great , expect !

~ End , I'm a dishwasher , Go to SPA 了 , See you next time !


original text :https://learne.co/2021/05/how...


Possible after code deployment BUG There's no way to know in real time , In order to solve these problems afterwards BUG, It took a lot of time log debugging , This way, I'd like to recommend an easy-to-use one for you BUG Monitoring tools Fundebug.

original text :https://learue.co/2020/01/a-v...

communication

Have dreams , There are dry goods , WeChat search 【 The big move the world 】 Pay attention to this dish washing wisdom who is still washing dishes in the early morning .

this paper GitHub https://github.com/qq44924588... Included , There is a complete interview site for a large factory 、 Materials and my series .

copyright notice
author[Front end Xiaozhi],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826154655882H.html

Random recommended