Vue3 スタイルの新機能とその使用方法について

新しいスタイル機能

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

1. 部分的なスタイル

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

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

2。深さセレクター

は

scoped## にあります #スタイルのセレクターでより「深い」選択を行う場合、つまりサブコンポーネントに影響を与える場合は、:deep() この疑似クラス: <pre class='brush:php;toolbar:false;'>&lt;style scoped&gt; .a :deep(.b) { /* ... */ } &lt;/style&gt;</pre># を使用できます。

#v-html

で作成された DOM コンテンツはスコープ付きスタイルの影響を受けませんが、深さセレクターを使用してスタイルを設定することはできます。

3. スロット セレクター

デフォルトでは、スコープ スタイルは

レンダリングされたコンテンツに影響しません。は、親コンポーネントによって保持され、渡されると見なされます。

:slotted 疑似クラスを使用して、スロットのコンテンツをセレクターとして正確にターゲットにします:

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

4. グローバル セレクター

スタイル ルールの 1 つをグローバルに適用するには、別の <style></style>

を作成する代わりに、

:global 疑似クラスを使用できます:

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

5ローカル スタイルとグローバル スタイルの混合

#同じコンポーネントにスコープ付きスタイルとスコープなしスタイルの両方を含めることもできます:

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

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

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

1。デフォルトは です。 $style オブジェクトはコンポーネントに公開されます;

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

2。挿入されたモジュール名 #<pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;p :class=&quot;classes.red&quot;&gt;red&lt;/p&gt; &lt;/template&gt; &lt;style module=&quot;classes&quot;&gt; .red { color: red; } &lt;/style&gt;</pre>

7 をカスタマイズできます。setup

## で使用します。

#挿入されたクラスは、useCssModule API を介して

setup() および

で使用できます:

<script setup>
import { useCssModule } from &#39;vue&#39;
 
// 默认, 返回 <style module> 中的类
const defaultStyle = useCssModule()
 
// 命名, 返回 <style module="classes"> 中的类
const classesStyle = useCssModule(&#39;classes&#39;)
</script>

8. ダイナミック CSS

単一ファイル コンポーネントの

を通じて 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>

以上がVue3 スタイルの新機能とその使用方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。