Vue中CSS與CSS模塊有什么區(qū)別-創(chuàng)新互聯(lián)
本篇文章給大家分享的是有關(guān)Vue中CSS與CSS模塊有什么區(qū)別，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
創(chuàng)新互聯(lián)公司專注于衛(wèi)輝企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,
商城系統(tǒng)網(wǎng)站開發(fā)。衛(wèi)輝網(wǎng)站建設(shè)公司,為衛(wèi)輝等地區(qū)提供建站服務(wù)。全流程按需定制，專業(yè)設(shè)計，全程項目跟蹤，
創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
現(xiàn)代Web開發(fā)中的CSS離完美還差得遠(yuǎn)，這并不奇怪。現(xiàn)在，項目通常是相當(dāng)?shù)膹?fù)雜的，而CSS樣式又是全局性的，所以到最后總是極容易地發(fā)生樣式?jīng)_突： 樣式相互覆蓋 或 隱式地級聯(lián)到我們未考慮到的元素 。
為了減輕CSS存在的主要痛點，我們在項目中普遍采用 BEM 的方法來。不過這只能解決CSS問題中的一小部分。
對我們來說是幸運的，社區(qū)已經(jīng)開發(fā)出了可以幫助我們更徹底地解決問題的解決方案。你可能已經(jīng)聽說過 CSS Modules 、 Styled Componetns 、 Glamorous 或 JSS 。這些只是我們今天可以添加到項目中的一些最流行的工具。如果你對這個話題感興趣，你可以查看這篇文章： @Indrek Lasn 詳細(xì)介紹了 CSS in JS的全部思想 。
使用Vue-cli構(gòu)建的Vue應(yīng)用程序提供了兩個很棒的內(nèi)置解決方案： 作用域CSS 和 CSS Modules 。它們都有一些優(yōu)點和缺點，所以讓我們仔細(xì)看看哪種解決方案更適合你。
作用域CSS
在Vue中引入了CSS作用域 scoped 這個概念， scoped 的設(shè)計思想就是讓當(dāng)前組件的樣式不會影響到其他地方的樣式，編譯出來的選擇器將會帶上 data-v-hash 的方式來應(yīng)用到對應(yīng)的組件中，這樣一來，CSS也不需要添加額外的選擇器。也將解決CSS中選擇器作用域和選擇器權(quán)重的問題。
在Vue中，為了讓作用域樣式工作，只需要在
通過使用PostCSS并將上面的示例轉(zhuǎn)換為以下內(nèi)容，它僅將我們的樣式應(yīng)用于相同的組件中的元素：
就像你看到的一樣，整個過程不需要做什么就可以達(dá)到很好的效果： 作用域樣式 （CSS中一直以來令人頭痛的問題之一）。
現(xiàn)在假設(shè)你需要調(diào)整 Button 組件的寬度，你可以像平常使用一樣，在調(diào)用這個組件的地方添加一個額外的 class 來設(shè)置其樣式：
click
.btn-lg {
padding: 10px 30px;
}
轉(zhuǎn)換后就像下面這樣：
這次還是一樣，不需要做什么就可以很好的控制樣式。
不過請注意：這個特性存在一個缺陷，即如果你子組件的元素上有一個類已經(jīng)在這個父組件中定義過了，那么這個父組件的樣式就也會應(yīng)用到子組件上。只不過其權(quán)重沒有子組件同類名的重。比如下面這個示例：
.btn {
color: red;
}
.btn-lg {
padding: 10px 20px;
border: 2px solid red;
}
click
.btn-lg {
padding: 30px;
border: 5px solid green;
}
編譯出來的效果如下：
還有一些情況是我們需要對子組件的深層次結(jié)構(gòu)設(shè)置樣式。雖然這種做法并不受推薦，而且應(yīng)該盡量去避免。比如下面這個示例， Button 組件下有一個 標(biāo)簽，而在調(diào)用 Button 組件的父組件 App 中設(shè)置 span 樣式：
.btn {
color: red;
}
click
.btn span {
color: green;
font-weight: bold;
border: 1px solid green;
padding: 10px;
}
編譯出來的結(jié)果如下：
從上面的結(jié)果可以看出來，在父組件 App.vue 中的樣式：
.btn span {
color: green;
font-weight: bold;
border: 1px solid green;
padding: 10px;
}上面這段樣式并沒有編譯出來，運用到子組件 Button.vue 中的 span 中。
在 scoped 樣式中，這種情況可以使用 >>> 連接符或者 /deep/ 來解決：
.btn >>> span {
color: green;
font-weight: bold;
border: 1px solid green;
padding: 10px;
}
此時雖然依舊是在 App.vue 中 scoped 控制 Button.vue 組件中 span ，但上面不同的是，這次樣式生效。編譯出來的結(jié)果如下：
另外使用作用域樣式還存在一個問題。那就是對 v-html 中內(nèi)在的標(biāo)簽樣式不生效。比如下面這個示例：
.btn {
color: red;
}
strong {
color: green;
border: 1px solid green;
padding: 10px;
}
編譯出來的結(jié)果如下：
從上圖可以看出來， v-html 中的 strong 標(biāo)簽樣式并未生效。和前面在父組件的 scoped 中設(shè)置子組件內(nèi)部標(biāo)簽未生效一樣。當(dāng)然，其解決方案也是同樣的， 使用 >>> 連接符或 /deep/ 可以讓 v-html 中的標(biāo)簽樣式生效。比如上面的示例，可以將代碼修改為：
.btn /deep/ strong {
color: green;
border: 1px solid green;
padding: 10px;
}
這個時候 v-html 中的 strong 樣式生效了，如下圖所示：
話又說回來，雖然 >>> 或 /deep/ 可以幫助我們穿透已封裝好的組件中的樣式，但這也失去了組件封裝的效果。再次回到以前CSS中令人頭痛的問題： CSS作用域 。
簡單的小結(jié)一下，在Vue中 scoped 屬性的渲染規(guī)則：
給DOM節(jié)點添加一個不重復(fù)的 data 屬性（比如 data-v-7ba5bd90 ）來表示他的唯一性
在每個CSS選擇器末尾（編譯后生成的CSS）加一個當(dāng)前組件的 data 屬性選擇器（如 [data-v-7ba5bd90] ）來私有化樣式。選擇器末尾的 data 屬性和其對應(yīng)的DOM中的 data 屬性相匹配
如果組件內(nèi)部包含有其他組件，只會給其他組件的最外層標(biāo)簽加上當(dāng)前組件的 data 屬性
上面我們看到的是Vue機制內(nèi)作用域CSS的使用。在Vue中，除了作用域CSS之外，還有另外一種機制，那就是 CSS Modules ，即 模塊化CSS 。
CSS Modules
CSS Modules的流行起源于React社區(qū)，它獲得了社區(qū)的迅速的采用。Vue更甚之，其強大，簡便的特性在加上Vue-cli對其開箱即用的支持，將其發(fā)展到另一個高度。
在Vue中使用CSS Modules和作用域CSS同樣的簡單。和作用域CSS類似，在
然后在 里這樣寫：
{{msg}}
這個時候編譯出來的效果如下：
正如上圖所示， :class="$style.btn" 會被 vue-template-compiler 編譯成為 .Button_btn_3ykLd 這個類名，并且樣式的選擇器也自動發(fā)生了相應(yīng)的變化。
但在這里有一點需要注意，我們平時有可能在類名中會使用分隔線，比如：
.btn-lg {
border: 1px solid red;
padding: 10px 30px;
}
如果通過 $style 調(diào)用該類名時要是寫成 $style.btn-lg ，這樣寫是一個不合法的JavaScript變量名。此時在編譯的時候，會報一個錯話信息：
按鈕的樣式也不會生效。如果要生效，我們需要通過下面這樣的方式來寫：
{{msg}}
編譯出來的結(jié)果如下：
除了$style.btn-lg這種方式會報錯之外，寫在駝峰（$style.btnLg）的也會報錯。
上面說的 module 屬性會經(jīng)由Vue-loader編譯后，在我們的 component 產(chǎn)生一個叫 $style 的隱藏的 computed 屬性。也就是說，我們甚至可以在Vue生命周期的 created 鉤子中取得由CSS Modules生成的 class 類名：
在瀏覽器的 console 中可以看到 modules 編譯出來對應(yīng)的類名：
利用這樣的特性，在 也可以這樣寫：
.btn-lg {
padding: 15px 30px;
}
.btn-sm {
padding: 5px;
}
這個時候編譯出來的結(jié)果如下：
如上圖所示，當(dāng) data 中的 isLg 屬性值為 true 時， Larger Button 按鈕的 padding 變了，按鈕也同時變大了。除此之外，我們還可以通過 props 將 class 傳到子組件中。比如像下面這樣使用：
{{msg}}
.btn {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px 15px;
background: #fefefe;
margin: 5px;
}
.btn-lg {
padding: 15px 30px;
}
.btn-sm {
padding: 5px;
}
.btn-primary {
background: rgb(54, 152, 244);
border-color: rgb(32, 108, 221);
color: #fff;
}
編譯出來的效果如下圖所示：
如果我們想要在JavaScript里面將獨立的CSS文件作為CSS模塊來加載的話，需要在 .css 文件名前添加 .module 前綴，比如：
如果你是在項目中引入的是處理器文件也是如此，比如 .scss 文件：
如果你覺得這樣比較麻煩，可以在 vue.config.js 文件中 css.modules 設(shè)為 true ：
// vue.config.js
module.exports = {
css: {
modules: true
}
}注意，上面的示例創(chuàng)建的項目是使用Vue-cli 3創(chuàng)建的。如果是使用Webpack的話，需要根據(jù)Webpack的相關(guān)機制進行配制。
從上面的示例中我們可以看出。使用 module 和 scoped 不一樣的地方就是在于所有創(chuàng)建的類可以通過 $style 對象獲取。因此類要應(yīng)用到元素上，就需要通過 :class 來綁定 $style 這個對象。它的好處是，當(dāng)我們在HTML中查看這個元素時，我們可以立刻知道它所屬的是哪個組件。如果你夠細(xì)心的話，可以看到編譯出來的類名，都會以組件名為前綴，比如：
除了這個好處之外，還有另一個好處，即： 一切都變成顯式的了，我們擁有了徹底的控制權(quán) 。
總結(jié)
不管是CSS Modules還是作用域CSS，這兩種方案都非常簡單，易用。在某種程度上解決的是同樣的痛點（CSS的痛）。那么你應(yīng)該選擇哪種呢？
scoped 樣式的使用不需要額外的知識，給人舒適的感覺。它所存在的局限，也正它的使用簡單的原因。它可以用于支持小型到中型的Web應(yīng)用程序。在更大的Web應(yīng)用程序或更復(fù)雜的場景中，對于CSS的運用，我們更希望它是顯式的，更具有控制權(quán)。比如說，你的樣式可以在多組件中重用時，那么 scoped 的局限性就更為明顯了。反之，CSS Modules的出現(xiàn)，正好解決了這些問題，不過也要付出一定的代價，那就是需要通過 $style 來引用。雖然在 中大量使用 $style ，讓人看起來很蛋疼，但它會讓你的樣式更加安全和靈活，更易于控制。CSS Modules還有一個好處就是可以使用JavaScript獲取到我們定義的一些變量，這樣我們就不需要手動保持其在多個文件中同步。
以上就是Vue中CSS與CSS模塊有什么區(qū)別，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
分享題目：Vue中CSS與CSS模塊有什么區(qū)別-創(chuàng)新互聯(lián)
當(dāng)前URL：http://weahome.cn/article/dhedhd.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
