資訊專欄INFORMATION COLUMN
摘要：官方文檔可以直接在能跑起來的項目中使用。所以在使用的父組件中使用的子組件也要開啟。能正常編譯，而則會編譯的不符合預期，所以平時養成良好的參數書寫順序也很重要。總結總結綜上所述，前期進行不麻煩的配置，實現的效果比更優，這里推薦使用。
官方文檔
scoped css可以直接在能跑起來的vue項目中使用。
使用方法：
使用scoped劃分本地樣式的結果編譯結果如下：
h1[data-v-4c3b6c1c] {
color: #f00;
}即在元素中添加了一個唯一屬性用來區分。
一、如果用戶在別處定義了相同的類名，也許還是會影響到組件的樣式。
二、根據css樣式優先級的特性，scoped這種處理會造成每個樣式的權重加重了：
即理論上我們要去修改這個樣式，需要更高的權重去覆蓋這個樣式。
所以在引用包含scoped的第三方插件時如若需要修改樣式則需要全局修改，而且要注意權重問題，0.0迫不得已再使用!important。
三、如果組件內部包含有其他組件，只會給其他組件的最外層標簽加上當前組件的data屬性：
所以一般父組件如果加了scoped，會比已經設置過自己樣式的子組件內除最外層標簽的內層標簽的權重低，影響不到他們的樣式。
不過也是可以通過如下方法影響到的：
四、scoped會使標簽選擇器渲染變慢很多倍
官方給了一些注意事項如下：
我們可以看到用標簽選擇器時scoped會嚴重降低性能，而使用class或id則不會。
官方文檔
css module需要增加css-loader配置才能生效，具體可看文檔的實現。
注意
如果你使用的是style-loader，如果想讓配置生效需要更換到文檔所述的vue-style-loader（是vue-loader的一個依賴，無需多帶帶安裝）。
二者區別可以從這里了找vue-style-loader
使用如下：
Im gray
使用module的結果編譯如下：
Im gray
.gray_3FI3s6uz {
color: gray;
}由此可見，css module直接替換了類名，排除了用戶設置類名影響組件樣式的可能性。
這樣$style.red就可以當做一個變量，并且可以在js中使用，如下：
我們可以看到，module在使用時多出了綁定和$style，如果你想更優雅，可以看一下這個vue-css-modules。
在使用scss并開啟css module時發現一個問題
使用module的父組件會在沒有使用module的子組件的所有根類上增加hash改變其類名，可能會造成子組件樣式應用不上。
如下是沒有開啟css module子組件的樣式：
父組件開啟css module后編譯結果如下：
.comp_2tR6GNan {
color: palegoldenrod;
}
.comp_2tR6GNan p {
color: black;
}
.t_39GmF73s {
color: teal;
}
div {
color: yellow;
}可以看到comp和t類都被修改了類名，如果根樣式是標簽選擇器不會受影響。
所以在使用css module的父組件中使用的子組件也要開啟css module。
使用CSS modules處理動畫animation的關鍵幀keyframes，動畫名稱必須先寫。
animation: ani 1s;能正常編譯，而animation: 1s ani;則會編譯的不符合預期，所以平時養成良好的css參數書寫順序也很重要。
綜上所述，css module前期進行不麻煩的配置，實現的效果比scoped css更優，這里推薦使用css module。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2250.html
摘要：一個應用是離不開與，其中充斥的整個項目中。下面我會分別對與解決方案進行說明，最后在分析它們的利弊與選擇。不過一個子組件的根節點會同時受其父組件有作用域的和子組件有作用域的的影響。但它的局限性是適用于中小項目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一個web應用是離不開html、css與js，其中css充...
摘要：一個應用是離不開與，其中充斥的整個項目中。下面我會分別對與解決方案進行說明，最后在分析它們的利弊與選擇。不過一個子組件的根節點會同時受其父組件有作用域的和子組件有作用域的的影響。但它的局限性是適用于中小項目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一個web應用是離不開html、css與js，其中css充...
摘要：一個應用是離不開與，其中充斥的整個項目中。下面我會分別對與解決方案進行說明，最后在分析它們的利弊與選擇。不過一個子組件的根節點會同時受其父組件有作用域的和子組件有作用域的的影響。但它的局限性是適用于中小項目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一個web應用是離不開html、css與js，其中css充...
摘要：文件中標簽的幾個標識符在人生就要絕望的時候被編輯器所提示的一個所拯救臥槽寫到最后才發現這個屬性的具體卵用詳情見最后解決辦法問題背景問題由來項目中使用了框架與文件現狀中使用類名進行了樣式的綁定個人認為使用這種方式的綁定寫起來很麻煩不僅僅是麻煩 .vue文件中style標簽的幾個標識符 在人生就要絕望的時候, 被編輯器所提示的一個scopedSlots所拯救.臥槽, 寫到最后才發現這個屬性...
摘要：線上另加入了排行榜功能，如需查看源碼的，請切換到分支整個項目結構清晰，尤其單文件組件的表現力尤為突出，使得每個組件的邏輯都沒有過于復雜，而且在的統籌下，的單向數據流模式使得所有的變化都在可控制可預期的范圍內。 2016注定不是個平凡年，無論是中秋節問世的angular2，還是全面走向穩定的React，都免不了面對另一個競爭對手vue2。喜歡vue在設計思路上的先進性(原諒我用了這么一個...
閱讀 2883·2021-11-24 09:39
閱讀 2455·2019-08-30 15:53
閱讀 3025·2019-08-30 13:47
閱讀 1296·2019-08-30 12:50
閱讀 1481·2019-08-29 16:31
閱讀 2642·2019-08-29 13:14
閱讀 1559·2019-08-29 10:55
閱讀 790·2019-08-26 13:32
