日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

單文件組件由三個不同的實體組成：模板、腳本和樣式。所有這些都很重要，但后者往往被忽視，盡管它可能會變得復(fù)雜，并經(jīng)常導(dǎo)致挫折和錯誤。更好地理解可以改進代碼審查并減少調(diào)試時間。

創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司一直秉承“誠信做人，踏實做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個客戶多一個朋友！專注中小微企業(yè)官網(wǎng)定制，成都網(wǎng)站設(shè)計、成都做網(wǎng)站，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。

這里有 7 個小貼士可以幫助你：

• 1.樣式作用域和插槽內(nèi)容
• 2.作用域選擇器性能
• 3.全局樣式
• 4.樣式中的 Javascript 變量
• 5.CSS 模塊
• 6.CSS 與 SCSS 中的變量
• 7.SCSS include 與 extend

1.樣式作用域和插槽內(nèi)容

將樣式的作用域限定為只影響當前組件，是防止組件耦合和意外副作用的有效策略。

它是通過添加 scoped 屬性來轉(zhuǎn)換以下內(nèi)容來實現(xiàn)的：

to

如果想讓樣式影響子組件，可以使用 deep 選擇器。

其編譯為：

.a[data-v-7ba5bd90] .b {
  /* ... */
}

使用插槽選擇器對插槽內(nèi)的內(nèi)容也是如此。

2.作用域選擇器性能

作用域樣式不會消除對類的需求。由于 CSS 選擇器的工作方式，當使用作用域時，p { color: red } 的速度會慢很多倍。如果使用類來代替，性能方面的影響可以忽略不計。

3.全局樣式

影響整個應(yīng)用程序的樣式可能不是一個好主意。如果您還是想這么做，可以將作用域樣式與非作用域樣式混合使用，或者使用 :global 偽選擇器

4.樣式中的 Javascript 變量

自 Vue 3.2 版起，可以在樣式標簽內(nèi)使用 v-bind。這可以帶來一些有趣的用例，比如只需幾行代碼就能實現(xiàn)顏色選擇器。

一個更高級的用例是使可重用應(yīng)用程序圖標組件的圖標大小動態(tài)化。

5.CSS 模塊

只需在樣式標簽中添加 module 屬性，即可立即支持 CSS 模塊。這些類會通過 $style 變量自動顯示在模板中。

6.CSS 與 SCSS 中的變量

SCSS 變量是我們編寫 CSS 方式的一次重大變革。在使用預(yù)處理器之前，使用變量是不可能的。此后，CSS 迎頭趕上，現(xiàn)在所有主流瀏覽器都支持 CSS 變量。CSS 變量提供了 SCSS 變量所能做到的一切，此外還提供了更簡便的主題功能，因此在這場爭論中，CSS 變量明顯勝出。

7.SCSS include 與 extend

這兩個 SCSS 助手經(jīng)常會引起混淆，因為它們都可以用來減少 SCSS 代碼的重復(fù)。CSS 輸出中存在一些細微的差別，您應(yīng)該注意。

@include 幫助程序用于包含在 mixin 塊中編寫的代碼。

生成的 CSS 將根據(jù)需要多次重復(fù)代碼

.error-text {
  color: red;
  font-size: 24px;
}

.error-notification {
  color: red;
  border: 1px solid red;
  padding: 8px;
}

這里的 error mixin 只有一條規(guī)則，但在實際應(yīng)用中通常會有更復(fù)雜的 mixin。

另一方面，當元素幾乎相同時 @extend 更有用。

生成的代碼為：

.error-notification,
.error-text {
  color: red;
}

.error-text {
  font-size: 24px;
}

.error-notification {
  border: 1px solid red;
  padding: 8px;
}

這里的一般規(guī)則是選擇 extend，除非你想在 mixin 中使用一個參數(shù)，在這種情況下，只有 include 才有效。

原文：https://fadamakis.com/7-quick-tips-about-vue-styles-you-might-didnt-know-5ec2fcecb384

分享題目：關(guān)于Vue樣式的七個你(可能)不知道的技巧
分享地址：http://www.dlmjj.cn/article/djesgeo.html