單文件組件由三個(gè)不同的實(shí)體組成：模板、腳本和樣式。所有這些都很重要，但后者往往被忽視，盡管它可能會(huì)變得復(fù)雜，并經(jīng)常導(dǎo)致挫折和錯(cuò)誤。更好地理解可以改進(jìn)代碼審查并減少調(diào)試時(shí)間。kDc28資訊網(wǎng)——每日最新資訊28at.com

這里有 7 個(gè)小貼士可以幫助你：kDc28資訊網(wǎng)——每日最新資訊28at.com

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

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

將樣式的作用域限定為只影響當(dāng)前組件，是防止組件耦合和意外副作用的有效策略。kDc28資訊網(wǎng)——每日最新資訊28at.com

它是通過添加 scoped 屬性來轉(zhuǎn)換以下內(nèi)容來實(shí)現(xiàn)的：kDc28資訊網(wǎng)——每日最新資訊28at.com

<template>  <div class="title">Hello world!</div></template><style scoped>  .title {    font-size: 24px;  }</style>

tokDc28資訊網(wǎng)——每日最新資訊28at.com

<template>  <div class="title" data-v-7ba5bd90>Hello world!</div></template><style scoped>  .title[data-v-7ba5bd90] {    font-size: 24px;  }</style>

如果想讓樣式影響子組件，可以使用 deep 選擇器。kDc28資訊網(wǎng)——每日最新資訊28at.com

<style scoped>  .a :deep(.b) {    /* ... */  }</style>

其編譯為：kDc28資訊網(wǎng)——每日最新資訊28at.com

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

使用插槽選擇器對(duì)插槽內(nèi)的內(nèi)容也是如此。kDc28資訊網(wǎng)——每日最新資訊28at.com

<style scoped>  :slotted(div) {    color: red;  }</style>

2.作用域選擇器性能

作用域樣式不會(huì)消除對(duì)類的需求。由于 CSS 選擇器的工作方式，當(dāng)使用作用域時(shí)，p { color: red } 的速度會(huì)慢很多倍。如果使用類來代替，性能方面的影響可以忽略不計(jì)。kDc28資訊網(wǎng)——每日最新資訊28at.com

<!-- DO --><template>  <h1 class="title">Hello world!</h1></template><style scoped>  .title {    font-size: 24px;  }</style>

<!-- DONT --><template>  <h1>Hello world!</h1></template><style scoped>  h1 {    font-size: 24px;  }</style>

3.全局樣式

影響整個(gè)應(yīng)用程序的樣式可能不是一個(gè)好主意。如果您還是想這么做，可以將作用域樣式與非作用域樣式混合使用，或者使用 :global 偽選擇器kDc28資訊網(wǎng)——每日最新資訊28at.com

<style scoped>  :global(.red) {    color: red;  }</style>

4.樣式中的 Javascript 變量

自 Vue 3.2 版起，可以在樣式標(biāo)簽內(nèi)使用 v-bind。這可以帶來一些有趣的用例，比如只需幾行代碼就能實(shí)現(xiàn)顏色選擇器。kDc28資訊網(wǎng)——每日最新資訊28at.com

<template>  <h1 class="text">Hello World!</h1>  <input type="color" v-model="color" /></template><script setup>  import { ref } from "vue";  const color = ref("");</script><style>  .text {    color: v-bind(color);  }</style>

一個(gè)更高級(jí)的用例是使可重用應(yīng)用程序圖標(biāo)組件的圖標(biāo)大小動(dòng)態(tài)化。kDc28資訊網(wǎng)——每日最新資訊28at.com

<template>  <p>    <input type="radio" v-model="size" :value="sizes.s" />S    <input type="radio" v-model="size" :value="sizes.m" />M    <input type="radio" v-model="size" :value="sizes.l" />L    <input      type="radio"      v-model="size"      :value="sizes.xl"    />XL  </p>  <div class="icon" /></template><script setup lang="ts">  import { ref } from "vue";  enum sizes {    s = 8,    m = 16,    l = 32,    xl = 64,  }  const size = ref(sizes.xl);</script><style>  .icon {    width: v-bind(size + "px");    height: v-bind(size + "px");    background: #cecece;  }</style>

5.CSS 模塊

只需在樣式標(biāo)簽中添加 module 屬性，即可立即支持 CSS 模塊。這些類會(huì)通過 $style 變量自動(dòng)顯示在模板中。kDc28資訊網(wǎng)——每日最新資訊28at.com

<template>  <p :class="$style.red">This should be red</p></template><style module>  .red {    color: red;  }</style>

6.CSS 與 SCSS 中的變量

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

7.SCSS include 與 extend

這兩個(gè) SCSS 助手經(jīng)常會(huì)引起混淆，因?yàn)樗鼈兌伎梢杂脕頊p少 SCSS 代碼的重復(fù)。CSS 輸出中存在一些細(xì)微的差別，您應(yīng)該注意。kDc28資訊網(wǎng)——每日最新資訊28at.com

@include 幫助程序用于包含在 mixin 塊中編寫的代碼。kDc28資訊網(wǎng)——每日最新資訊28at.com

<template>  <p class="error-text">Hello World!</p>  <p class="error-notification">Hello World!</p></template><style lang="scss">  @mixin error {    color: red;  }  .error-text {    @include error;    font-size: 24px;  }  .error-notification {    @include error;    border: 1px solid red;    padding: 8px;  }</style>

生成的 CSS 將根據(jù)需要多次重復(fù)代碼kDc28資訊網(wǎng)——每日最新資訊28at.com

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

這里的 error mixin 只有一條規(guī)則，但在實(shí)際應(yīng)用中通常會(huì)有更復(fù)雜的 mixin。kDc28資訊網(wǎng)——每日最新資訊28at.com

另一方面，當(dāng)元素幾乎相同時(shí) @extend 更有用。kDc28資訊網(wǎng)——每日最新資訊28at.com

<template>  <p class="error-text">Hello World!</p>  <p class="error-notification">Hello World!</p></template><style lang="scss">  %error {    color: red;  }  .error-text {    @extend %error;    font-size: 24px;  }  .error-notification {    @extend %error;    border: 1px solid red;    padding: 8px;  }</style>

生成的代碼為：kDc28資訊網(wǎng)——每日最新資訊28at.com

.error-notification,.error-text {  color: red;}.error-text {  font-size: 24px;}.error-notification {  border: 1px solid red;  padding: 8px;}

這里的一般規(guī)則是選擇 extend，除非你想在 mixin 中使用一個(gè)參數(shù)，在這種情況下，只有 include 才有效。kDc28資訊網(wǎng)——每日最新資訊28at.com

原文：https://fadamakis.com/7-quick-tips-about-vue-styles-you-might-didnt-know-5ec2fcecb384kDc28資訊網(wǎng)——每日最新資訊28at.com

kDc28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-17270-0.html關(guān)于 Vue 樣式的七個(gè)你(可能)不知道的技巧

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 使用C++實(shí)現(xiàn)數(shù)獨(dú)求解器：解密數(shù)獨(dú)的算法之美

下一篇： 答讀者問：BeanFactoryPostProcessor 似乎失效了？