ホームページ > 記事 > ウェブフロントエンド > Vue でのスコープ付き使用ステップ分析
今回は、Vue でスコープを使用するための手順の分析をお届けします。Vue でスコープを使用する場合の 注意点とは何ですか。実際のケースを見てみましょう。
スコープとは何ですか?
vue ファイルの style タグには、scoped という特別な属性があります。 style タグにスコープ属性がある場合、その CSS スタイルは現在のコンポーネントにのみ適用できます。つまり、スタイルは現在のコンポーネント要素にのみ適用できます。この属性により、コンポーネント間のスタイルが互いに混入するのを防ぐことができます。プロジェクト内のすべてのスタイルタグがスコープ化されている場合、それはスタイルモジュール化を実現することと同じです。
scoped の実装原理
vue でのscoped 属性の効果は、主に PostCSS の翻訳を通じて実現されます。 以下は、翻訳前の vue コードです:<style scoped> .example { color: red; } </style> <template> <p class="example">hi</p> </template>翻訳後:
<style> .example[data-v-5558831a] { color: red; } </style> <template> <p class="example" data-v-5558831a>hi</p> </template>つまり: PostCSS。コンポーネントに一意の動的属性をすべての dom に追加し、対応する
属性セレクター を CSS セレクター に追加して、コンポーネント内の dom を選択します。この方法では、この属性を含む dom にのみスタイルが適用されます。 —— コンポーネントの内部ドーム。
なぜスコープ付きで侵入する必要があるのですか?
スコープは美しく見えますが、多くのプロジェクトでは、サードパーティコンポーネントを<style scoped> 外层 >>> 第三方组件 { 样式 } </style>>>> を使用すると、スコープ付き属性を使用するときに、スコープ内に侵入して他のコンポーネントの値を変更できます。
曲線を通して国を救う方法
実際、曲線を通して国を救う方法もあります。つまり、スコープ付き属性を含むスタイルタグを定義することに加えて、スコープ付き属性のない style タグ、つまり vue コンポーネントでグローバル スタイル タグを定義する場合、スコープ付きのスタイル タグ:<style> /* global styles */ </style> <style scoped> /* local styles */ </style>現時点では、サードパーティのスタイルを変更する CSS を記述するだけで済みます。最初のスタイル。
個人的におすすめの方法
上記の2つの方法、貫通メソッドは実際にスコープ属性の意味に違反しており、カーブセーブメソッドはコードが醜くなりすぎます。 個人的には 3 番目の方法をお勧めします。つまり、scoped は見た目は美しく見えますが、多くの落とし穴があるため、scoped 属性を使用せず、外部 dom に一意のクラスを追加してさまざまなコンポーネントを区別することはお勧めできません。この方法では、スコープ付きと同様の効果が得られるだけでなく、さまざまなサードパーティ コンポーネントのスタイルの変更も容易になり、コードは比較的快適に見えます。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書: webpack を使用して React 開発環境を構築する手順の詳細な説明
以上がVue でのスコープ付き使用ステップ分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。