ホームページ >ウェブフロントエンド >jsチュートリアル >Vue でのスコープ付き実装原則と浸透使用手順の詳細な説明
Vue でのスコープ付き実装原則と浸透使用手順の詳細な説明
- php中世界最好的语言オリジナル
- 2018-05-29 17:44:301965ブラウズ
今回は、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 サイトの他の関連記事に注目してください。
推奨読書:
node.jsのデフォルトのnpmインストールディレクトリを操作する方法
以上がVue でのスコープ付き実装原則と浸透使用手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。