如何理解尤大在 Vue的生態(tài)進(jìn)展中提到的 style動(dòng)態(tài)變量注入

這篇文章主要介紹“如何理解尤大在 Vue的生態(tài)進(jìn)展中提到的 style動(dòng)態(tài)變量注入”，在日常操作中，相信很多人在如何理解尤大在 Vue的生態(tài)進(jìn)展中提到的 style動(dòng)態(tài)變量注入問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何理解尤大在 Vue的生態(tài)進(jìn)展中提到的 style動(dòng)態(tài)變量注入”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

在 Vue RFC 中有一個(gè)關(guān)于樣式的提案 SFC style CSS variable injection，這個(gè) RFC  為Vue開(kāi)發(fā)者提供了一種使用組件的響應(yīng)性數(shù)據(jù)作為CSS變量的方法。

在Vue 3中，只需一個(gè)簡(jiǎn)單的語(yǔ)法，我們就可以在運(yùn)行時(shí)更新樣式。

在本文中，我們將了解如何使用這些SFC樣式，它是如何工作的，然后了解一些來(lái)自RFC的高級(jí)知識(shí)。

本文主要內(nèi)容：

1.如何使用SFC樣式?2. Vue中的響應(yīng)式樣式 3. Vue SFC 樣式變量如何工作 4. 需要知道的一些知識(shí) 1.CSS變量在子組件中不可用  2.使用前檢查瀏覽器支持情況 5 .總結(jié)

Single File Component : 單文件組件，簡(jiǎn)稱 SFC

如何使用SFC樣式?

要使用這個(gè)特性，只需要兩個(gè)步驟：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 在組件的script中聲明一個(gè)響應(yīng)式變量。

3. 在 css 中使用 v-bind 來(lái)使用這個(gè)變量。

來(lái)個(gè)粟子：

<template> <div>   <div class="text">hello</div> </div> </template>  <script> export default {     data() {         return {             color: 'red',         }     } } </script>  <style> .text {     color: v-bind(color); } </style>

很簡(jiǎn)單。

如果查看瀏覽器中的組件，可以看到元素從數(shù)據(jù)中正確地獲得了其顏色的值

這也適用于更復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，假設(shè)我們有一個(gè)名為fontStyles的對(duì)象，該對(duì)象中有一個(gè)weight的屬性。

我們?nèi)匀皇褂胿-bind訪問(wèn)它，但因?yàn)槲覀儌鬟f是一個(gè)對(duì)象，所以需要使用 JS 表達(dá)式來(lái)訪問(wèn)這個(gè)內(nèi)部屬性，且需要將表達(dá)式括放在引號(hào)中。

<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中的響應(yīng)式樣式

無(wú)論我們是使用 JS 表達(dá)式還是僅僅使用根級(jí)數(shù)據(jù)綁定，我們都可以利用Vue的內(nèi)置響應(yīng)式在運(yùn)行時(shí)更新樣式。

假設(shè)我們希望能夠使用一個(gè)按鈕來(lái)更改文本的顏色，那么可以這樣做。

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

我們所要做的就是改變對(duì)應(yīng)的變量值，CSS樣式就會(huì)自己更新。這就是這個(gè)特性如此強(qiáng)大的原因，它為我們提供了一種干凈的方式來(lái)修改頁(yè)面在運(yùn)行時(shí)的外觀。

Vue SFC 樣式變量如何工作

了解了使用方式之后，我們來(lái)看下 Vue 是怎么做到的。如果我們檢查元素，我們可以更好地了解Vue如何運(yùn)作它的魔力。

在我們的樣式節(jié)中引用的任何變量都被作為內(nèi)聯(lián)樣式添加到組件的根元素中。

像普通的CSS那樣寫(xiě)，我們聲明CSS變量-015c408c-color，并將其設(shè)置為red，將變量--015c408c-font_weight，設(shè)置為800。

element.style { /* root element */     --015c408c-color: red;     --015c408c-font_weight: 800; }  .text {     color: var(--015c408c-color);     font-weight: var(--015c408c-font_weight); }

然后就是將 v-bind 轉(zhuǎn)換成使用 CSS 變量方式。

然后，每當(dāng)響應(yīng)性數(shù)據(jù)發(fā)生變化時(shí)

• 我們的內(nèi)聯(lián)樣式改變了，這意味著...

• 我們的CSS變量改變了，這意味著...

• 最終樣式更改為響應(yīng)式的新值

這就是如何在運(yùn)行時(shí)更新樣式就像上面的 color 做的那樣。

CSS變量在子組件中不可用

為了避免繼承問(wèn)題，定義的CSS變量對(duì)它的任何子組件都不可用。

例如，如果我們向現(xiàn)有組件添加一個(gè)子組件。

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

假設(shè)子組件是這樣構(gòu)建的。

<template>     <div class="child-text"> Child Component </div> </template>  <style>     .child-text {         color: v-bind(color);     } </style>

這不會(huì)改變顏色，因?yàn)槲覀兊淖咏M件不知道任何CSS變量。

使用前檢查瀏覽器支持情況

如果你想要項(xiàng)目使用該特性，需要先檢查一下瀏覽器對(duì) CSS 變量的支持情況

到此，關(guān)于“如何理解尤大在 Vue的生態(tài)進(jìn)展中提到的 style動(dòng)態(tài)變量注入”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！