ホームページ > 記事 > ウェブフロントエンド > Vue3 スタイルの新機能とその使用方法について
Vue3.2 バージョンでは、ローカル スタイルなどの単一ファイル コンポーネントのスタイルに多くのアップグレードが加えられています。 CSS 変数とスタイルは、テンプレートの使用などのために公開されます。 (学習ビデオ共有: vue ビデオ チュートリアル)
1. 部分的なスタイル
c9ccee2e6ea535a969eb3f532ad9fe89
タグが scoped# # の場合# 属性の場合、その CSS は現在のコンポーネントの要素にのみ適用されます:
<template> <div class="example">hi</div> </template> <style scoped> .example { color: red; } </style>
2。深さセレクター
はscoped## にあります #スタイルのセレクターでより「深い」選択を行う場合、つまりサブコンポーネントに影響を与える場合は、:deep()
この疑似クラス: <pre class="brush:js;toolbar:false;"><style scoped>
.a :deep(.b) {
/* ... */
}
</style></pre>
# を使用できます。
で作成された DOM コンテンツはスコープ付きスタイルの影響を受けませんが、深さセレクターを使用してスタイルを設定することはできます。3. スロット セレクター
デフォルトでは、スコープ スタイルは 38b537b6886351ac721d89624ba185ca
レンダリングされたコンテンツに影響しません。は、親コンポーネントによって保持され、渡されると見なされます。:slotted 疑似クラスを使用して、スロットのコンテンツをセレクターとして正確にターゲットにします:
<style scoped> :slotted(div) { color: red; } </style>
4. グローバル セレクター
スタイル ルールの 1 つをグローバルに適用するには、別の c9ccee2e6ea535a969eb3f532ad9fe89
を作成する代わりに、:global 疑似クラスを使用できます:
<style scoped> :global(.red) { color: red; } </style>
5ローカル スタイルとグローバル スタイルの混合
#同じコンポーネントにスコープ付きスタイルとスコープなしスタイルの両方を含めることもできます:<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
a6167d77ee734aaef6dcd2aa69de7b33 タグは 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:js;toolbar:false;"><template>
<p :class="classes.red">red</p>
</template>
<style module="classes">
.red {
color: red;
}
</style></pre>
## で使用します。
#挿入されたクラスは、useCssModule API を介してsetup() および 5101c0cdbdc49998c642c71f6b6410a8
で使用できます:<script setup> import { useCssModule } from 'vue' // 默认, 返回 <style module> 中的类 const defaultStyle = useCssModule() // 命名, 返回 <style module="classes"> 中的类 const classesStyle = useCssModule('classes') </script>
8. ダイナミック CSS
単一ファイル コンポーネントの c9ccee2e6ea535a969eb3f532ad9fe89 タグは、v-bind
を通じて CSS 値を動的コンポーネントの状態に関連付けることができます。 CSS 関数:<script setup> const theme = { color: 'red' } </script> <template> <p>hello</p> </template> <style scoped> p { color: v-bind('theme.color'); } </style>
以上がVue3 スタイルの新機能とその使用方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。