ホームページ >ウェブフロントエンド >jsチュートリアル >Vue でスコープ付き CSS を使用することと CSS モジュールを使用することの違いは何ですか?
今回は、スコープ付き CSS と Vue モジュール での CSS の使用の違いと、Vue でスコープ付き CSS と CSS モジュールを使用する際の 注意事項 についてお届けします。実際のケースを見てみましょう。
スコープ付き CSS
公式ドキュメントスコープ付き CSS は、実行中の Vue プロジェクトで直接使用できます。 使用法:<style scoped> h1 { color: #f00; } </style>scoped を使用してローカルスタイルを分割したコンパイル結果は次のとおりです:
h1[data-v-4c3b6c1c] { color: #f00; }つまり、要素に独自の属性を追加して区別します。
欠点
1. ユーザーが他の場所で同じクラス名を定義した場合、コンポーネントのスタイルに影響を与える可能性があります。 2. CSS スタイル優先度 の特性に従って、スコープ指定された処理により各スタイルの重みが増加します。
理論的には、このスタイルを変更したい場合は、このスタイルをカバーするためにより高い重みが必要になります。 そのため、スコープ付きを含むサードパーティのプラグインを参照する場合、スタイルを変更する必要がある場合はグローバルに変更する必要があり、重みの問題に注意する必要があり、0.0 では !重要 を使用する以外に選択肢はありません。 。 3. コンポーネントに他のコンポーネントが含まれている場合、現在のコンポーネントの data 属性のみが他のコンポーネントの最も外側のタグに追加されます。
したがって、一般に、親コンポーネントがスコープされている場合、そのコンポーネントは、そのコンポーネントが含まれる子よりも優れています。独自のスタイルを設定します。最も外側のタグを除くコンポーネント内の内側のタグは重みが低く、スタイルには影響しません。
しかし、次のメソッドの影響を受ける可能性もあります:
第 4 に、スコープを指定すると、タグ セレクター のレンダリングが何倍も遅くなります 公式は次のようないくつかの予防措置を講じています:
us タグ セレクターを使用するとスコープ付きではパフォーマンスが大幅に低下しますが、クラスまたは ID を使用するとパフォーマンスが低下しないことがわかります。
cssモジュール公式ドキュメント
cssモジュールを有効にするには、css-loader設定を追加する必要があります。詳細については、ドキュメントの実装を参照してください。
注 style-loader を使用している場合、設定を有効にするには、ドキュメントの説明に従って vue-style-loader に変更する必要があります。
2 つの違いはここで見つけることができます。 vue-style-loader
は次のように使用されます:
<template> <p :class="$style.gray"> Im gray </p> </template> <style module> .gray { color: gray; } </style>
モジュールを使用した結果は次のようにコンパイルされます:
<p class="gray_3FI3s6uz">Im gray</p> .gray_3FI3s6uz { color: gray; }
css モジュールが直接使用されていることがわかります。ユーザー設定クラスを除くクラス名を置き換えます。名前がコンポーネントのスタイルに影響を与える可能性があります。
このように、$style.red は変数として使用でき、次のように js で使用できます:
<script> export default { created () { console.log(this.$style.gray) // -> "gray_3FI3s6uz" // 一个基于文件名和类名生成的标识符 } } </script>
さらに使用したい場合は、モジュールにさらに多くのバインディングと $style があることがわかります。エレガントなので、この vue-css-modules を見てください。
キーフレームでCSSモジュールを使用する際の問題アニメーション
アニメーションのキーフレームを処理するには、CSSモジュールを使用してください。アニメーション名を最初に記述する必要があります。 この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:webpack+react開発環境を構築する方法
以上がVue でスコープ付き CSS を使用することと CSS モジュールを使用することの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。