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 ？
- Vue Responsive styles in
- Vue SFC How style variables work
- Some knowledge you need to know
1.CSS Variables are not available in subcomponents
2. Check browser support before use - . summary
Single File Component : Single file component , abbreviation SFC
How to use SFC style ？
To use this feature , There are only two steps ：
- In the component's
scriptDeclare a responsive variable in . - stay css Use in
v-bindTo 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
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>- 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 .
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 .
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 .
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
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 .
