成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue中scoped css和css module比較

Faremax / 3172人閱讀

摘要：官方文檔可以直接在能跑起來的項(xiàng)目中使用。所以在使用的父組件中使用的子組件也要開啟。能正常編譯，而則會(huì)編譯的不符合預(yù)期，所以平時(shí)養(yǎng)成良好的參數(shù)書寫順序也很重要?？偨Y(jié)總結(jié)綜上所述，前期進(jìn)行不麻煩的配置，實(shí)現(xiàn)的效果比更優(yōu)，這里推薦使用。

scoped css

官方文檔

scoped css可以直接在能跑起來的vue項(xiàng)目中使用。

使用方法：

使用scoped劃分本地樣式的結(jié)果編譯結(jié)果如下：

h1[data-v-4c3b6c1c] {
    color: #f00;
}

即在元素中添加了一個(gè)唯一屬性用來區(qū)分。

缺點(diǎn)

一、如果用戶在別處定義了相同的類名，也許還是會(huì)影響到組件的樣式。

二、根據(jù)css樣式優(yōu)先級(jí)的特性，scoped這種處理會(huì)造成每個(gè)樣式的權(quán)重加重了：

即理論上我們要去修改這個(gè)樣式，需要更高的權(quán)重去覆蓋這個(gè)樣式。

所以在引用包含scoped的第三方插件時(shí)如若需要修改樣式則需要全局修改，而且要注意權(quán)重問題，0.0迫不得已再使用!important。

三、如果組件內(nèi)部包含有其他組件，只會(huì)給其他組件的最外層標(biāo)簽加上當(dāng)前組件的data屬性：

所以一般父組件如果加了scoped，會(huì)比已經(jīng)設(shè)置過自己樣式的子組件內(nèi)除最外層標(biāo)簽的內(nèi)層標(biāo)簽的權(quán)重低，影響不到他們的樣式。

不過也是可以通過如下方法影響到的：

四、scoped會(huì)使標(biāo)簽選擇器渲染變慢很多倍

官方給了一些注意事項(xiàng)如下：

我們可以看到用標(biāo)簽選擇器時(shí)scoped會(huì)嚴(yán)重降低性能，而使用class或id則不會(huì)。

css module

官方文檔

css module需要增加css-loader配置才能生效，具體可看文檔的實(shí)現(xiàn)。

注意

如果你使用的是style-loader，如果想讓配置生效需要更換到文檔所述的vue-style-loader（是vue-loader的一個(gè)依賴，無需多帶帶安裝）。

二者區(qū)別可以從這里了找vue-style-loader

使用如下：

使用module的結(jié)果編譯如下：

Im gray


.gray_3FI3s6uz {
    color: gray;
}

由此可見，css module直接替換了類名，排除了用戶設(shè)置類名影響組件樣式的可能性。

這樣$style.red就可以當(dāng)做一個(gè)變量，并且可以在js中使用，如下：

我們可以看到，module在使用時(shí)多出了綁定和$style，如果你想更優(yōu)雅，可以看一下這個(gè)vue-css-modules。

css module父子組件問題

在使用scss并開啟css module時(shí)發(fā)現(xiàn)一個(gè)問題

使用module的父組件會(huì)在沒有使用module的子組件的所有根類上增加hash改變其類名，可能會(huì)造成子組件樣式應(yīng)用不上。

如下是沒有開啟css module子組件的樣式：

父組件開啟css module后編譯結(jié)果如下：

.comp_2tR6GNan {
  color: palegoldenrod;
}
.comp_2tR6GNan p {
  color: black;
}
.t_39GmF73s {
  color: teal;
}
div {
  color: yellow;
}

可以看到comp和t類都被修改了類名，如果根樣式是標(biāo)簽選擇器不會(huì)受影響。

所以在使用css module的父組件中使用的子組件也要開啟css module。

使用css module在keyframes中的問題

使用CSS modules處理動(dòng)畫animation的關(guān)鍵幀keyframes，動(dòng)畫名稱必須先寫。

animation: ani 1s;能正常編譯，而animation: 1s ani;則會(huì)編譯的不符合預(yù)期，所以平時(shí)養(yǎng)成良好的css參數(shù)書寫順序也很重要。

總結(jié)

綜上所述，css module前期進(jìn)行不麻煩的配置，實(shí)現(xiàn)的效果比scoped css更優(yōu)，這里推薦使用css module。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2250.html

相關(guān)文章

  • Vue:scoped與module的使用與利弊

    摘要：一個(gè)應(yīng)用是離不開與，其中充斥的整個(gè)項(xiàng)目中。下面我會(huì)分別對(duì)與解決方案進(jìn)行說明，最后在分析它們的利弊與選擇。不過一個(gè)子組件的根節(jié)點(diǎn)會(huì)同時(shí)受其父組件有作用域的和子組件有作用域的的影響。但它的局限性是適用于中小項(xiàng)目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一個(gè)web應(yīng)用是離不開html、css與js，其中css充...

    zhoutk 評(píng)論0 收藏0

  • Vue:scoped與module的使用與利弊

    摘要：一個(gè)應(yīng)用是離不開與，其中充斥的整個(gè)項(xiàng)目中。下面我會(huì)分別對(duì)與解決方案進(jìn)行說明，最后在分析它們的利弊與選擇。不過一個(gè)子組件的根節(jié)點(diǎn)會(huì)同時(shí)受其父組件有作用域的和子組件有作用域的的影響。但它的局限性是適用于中小項(xiàng)目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一個(gè)web應(yīng)用是離不開html、css與js，其中css充...

    zr_hebo 評(píng)論0 收藏0

  • Vue:scoped與module的使用與利弊

    摘要：一個(gè)應(yīng)用是離不開與，其中充斥的整個(gè)項(xiàng)目中。下面我會(huì)分別對(duì)與解決方案進(jìn)行說明，最后在分析它們的利弊與選擇。不過一個(gè)子組件的根節(jié)點(diǎn)會(huì)同時(shí)受其父組件有作用域的和子組件有作用域的的影響。但它的局限性是適用于中小項(xiàng)目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一個(gè)web應(yīng)用是離不開html、css與js，其中css充...

    missonce 評(píng)論0 收藏0

  • .vue文件中style標(biāo)簽的幾個(gè)標(biāo)識(shí)符

    摘要：文件中標(biāo)簽的幾個(gè)標(biāo)識(shí)符在人生就要絕望的時(shí)候被編輯器所提示的一個(gè)所拯救臥槽寫到最后才發(fā)現(xiàn)這個(gè)屬性的具體卵用詳情見最后解決辦法問題背景問題由來項(xiàng)目中使用了框架與文件現(xiàn)狀中使用類名進(jìn)行了樣式的綁定個(gè)人認(rèn)為使用這種方式的綁定寫起來很麻煩不僅僅是麻煩 .vue文件中style標(biāo)簽的幾個(gè)標(biāo)識(shí)符 在人生就要絕望的時(shí)候, 被編輯器所提示的一個(gè)scopedSlots所拯救.臥槽, 寫到最后才發(fā)現(xiàn)這個(gè)屬性...

    _Suqin 評(píng)論0 收藏0

  • 單文件組件下的vue，可以擦出怎樣的火花

    摘要：線上另加入了排行榜功能，如需查看源碼的，請(qǐng)切換到分支整個(gè)項(xiàng)目結(jié)構(gòu)清晰，尤其單文件組件的表現(xiàn)力尤為突出，使得每個(gè)組件的邏輯都沒有過于復(fù)雜，而且在的統(tǒng)籌下，的單向數(shù)據(jù)流模式使得所有的變化都在可控制可預(yù)期的范圍內(nèi)。 2016注定不是個(gè)平凡年，無論是中秋節(jié)問世的angular2，還是全面走向穩(wěn)定的React，都免不了面對(duì)另一個(gè)競(jìng)爭(zhēng)對(duì)手vue2。喜歡vue在設(shè)計(jì)思路上的先進(jìn)性(原諒我用了這么一個(gè)...

    Keven 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<