Vue3 風の新機能について話しましょう（概要）

Vue3 はスタイル スタイルをアップグレードしました。次の記事では、Vue3 スタイルの新機能を要約して共有します。皆様のお役に立てれば幸いです。

Vue3.0 以降に導入されたセットアップ機能は、JS を書くように Vue コンポーネントを開発できるほか、スタイルにも変数や関数の導入など多くの新機能が追加されており、 css より再利用可能...

スタイルの新機能

Vue3.2 バージョンでは、単一ファイル コンポーネントのスタイルが改善されています。ローカル スタイル、CSS 変数、テンプレートに公開されるスタイルなどのアップグレードが行われました。 (学習ビデオ共有: vue ビデオ チュートリアル)

1. 部分的なスタイル

場合c9ccee2e6ea535a969eb3f532ad9fe89 タグに scoped 属性がある場合、その CSS は現在のコンポーネントの要素にのみ適用されます:

<template>
  <div class="example">hi</div>
</template>
 
<style scoped>
.example {
  color: red;
}
</style>

##2. 深さセレクター

スコープ付きスタイルのセレクターを使用して、より「深い」選択を行いたい場合は、 : サブコンポーネントに影響を与えるには、:deep() 疑似クラスを使用できます:

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

v-html を通じて作成された DOM コンテンツは、スタイリング効果をスコープすることはできませんが、深度セレクターを使用してスタイルを設定することはできます。

#3. スロット セレクターデフォルトでは、スコープ スタイルは

< に影響しません。 ;slot/>

レンダリングされたコンテンツは、親コンポーネントによって保持および渡されると見なされるためです。 :slotted 疑似クラスを使用して、スロットの内容をセレクターとして正確にターゲットにします: <pre class="brush:js;toolbar:false;">&lt;style scoped&gt; :slotted(div) { color: red; } &lt;/style&gt;</pre>

4. グローバル セレクタースタイル ルールの 1 つをグローバルに適用したい場合は、別の

c9ccee2e6ea535a969eb3f532ad9fe89

を作成する代わりに、:global 疑似class.実装: <pre class="brush:js;toolbar:false;">&lt;style scoped&gt; :global(.red) { color: red; } &lt;/style&gt;</pre>

5. ローカル スタイルとグローバル スタイルの混合ローカル スタイルとグローバル スタイルの両方を使用することもできます。同じコンポーネント内のスタイル スコープ付きスタイルとスコープなしスタイルが含まれます:

<style>
/* global styles */
</style>
 
<style scoped>
/* local styles */
</style>

6. CSS モジュールのサポート

< ;style module>

タグは CSS モジュール にコンパイルされ、生成された CSS クラス キーはコンポーネント 1 に公開されます。デフォルトは

です。 $style

オブジェクト コンポーネントに公開されます; <pre class="brush:js;toolbar:false;">&lt;template&gt; &lt;p :class=&quot;$style.red&quot;&gt; This should be red &lt;/p&gt; &lt;/template&gt; &lt;style module&gt; .red { color: red; } &lt;/style&gt;</pre>2. 挿入されたモジュール名

<template>
  <p :class="classes.red">red</p>
</template>
 
<style module="classes">
.red {
  color: red;
}
</style>

7 をカスタマイズできます。 setup 挿入されたクラスは、

useCssModule

を通じて setup() および 5101c0cdbdc49998c642c71f6b6410a8 で使用できます。 API: <pre class="brush:js;toolbar:false;">&lt;script setup&gt; import { useCssModule } from &amp;#39;vue&amp;#39; // 默认, 返回 &lt;style module&gt; 中的类 const defaultStyle = useCssModule() // 命名, 返回 &lt;style module=&quot;classes&quot;&gt; 中的类 const classesStyle = useCssModule(&amp;#39;classes&amp;#39;) &lt;/script&gt;</pre>

##8. 動的 CSS の c9ccee2e6ea535a969eb3f532ad9fe89

タグ単一のファイル コンポーネントを渡すことができます

v -bind この CSS 関数は、CSS 値を動的コンポーネントの状態に関連付けます:

<script setup>
const theme = {
  color: &#39;red&#39;
}
</script>
 
<template>
  <p>hello</p>
</template>
 
<style scoped>
p {
  color: v-bind(&#39;theme.color&#39;);
}
</style>

(終了)

(学習ビデオ共有: Web フロントエンド開発、基本プログラミング ビデオ)

以上がVue3 風の新機能について話しましょう（概要）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。