Detaillierte Erläuterung des bereichsbezogenen Implementierungsprinzips und der Penetrationsnutzungsschritte in Vue

Dieses Mal werde ich Ihnen eine detaillierte Erläuterung des bereichsbezogenen Implementierungsprinzips und der Penetrationsnutzungsschritte in Vue geben. Lasst uns einmal einen Blick darauf werfen.

Was ist der Geltungsbereich? Auf dem Style-Tag in der Vue-Datei gibt es ein spezielles Attribut: Scoped. Wenn ein Stil-Tag über ein bereichsbezogenes Attribut verfügt, kann sein CSS-Stil nur auf die aktuelle Komponente angewendet werden, d. h. der Stil kann nur auf das aktuelle Komponentenelement angewendet werden. Durch dieses Attribut kann verhindert werden, dass sich die Stile zwischen Komponenten gegenseitig verunreinigen. Wenn alle Stil-Tags in einem Projekt einen Gültigkeitsbereich haben, entspricht dies der Realisierung der

von Stilen.

Das Implementierungsprinzip von ScopedDer Effekt des Scoped-Attributs in Vue wird hauptsächlich durch PostCSS-Übersetzung realisiert. Das Folgende ist der Vue-Code vor der Übersetzung:

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

nach der Übersetzung:

<style>
.example[data-v-5558831a] {
 color: red;
}
</style>
<template>
 <p class="example" data-v-5558831a>hi</p>
</template>

Das heißt: PostCSS fügt allen DOMs in einer Komponente ein eindeutiges dynamisches Attribut hinzu und fügt dann ein zusätzliches entsprechendes

Attributselektor wird verwendet, um den Dom in der Komponente auszuwählen. Bei diesem Ansatz gilt der Stil nur für den Dom, der dieses Attribut enthält – den internen Dom der Komponente.

scoped sieht schön aus, aber in vielen Projekten wird es eine Situation geben, in der: auf eine Komponente eines Drittanbieters verweist

<style scoped>
 外层 >>> 第三方组件 {
  样式
 }
</style>

Tatsächlich gibt es auch eine geschwungene Methode, um das Land zu retten, nämlich nach der Definition ein Stil-Tag, das ein Bereichsattribut enthält. Definieren Sie außerdem einen Stil-Tag, der das Bereichsattribut nicht enthält, d. h. definieren Sie ein globales Stil-Tag in einer Vue-Komponente und ein Stil-Tag mit einem Geltungsbereich:

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

Die beiden oben genannten Methoden, die Penetrationsmethode, verletzen tatsächlich die Bedeutung des Bereichsattributs und die Kurvenspeichermethode ist ein weiteres Es macht den Code zu hässlich.

So verwenden Sie WebPack, um Vue Multi-Page zu konfigurieren

So bedienen Sie node.js standardmäßig npm-Installationsverzeichnis

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des bereichsbezogenen Implementierungsprinzips und der Penetrationsnutzungsschritte in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!