Wie Vue lokalen Umfang und Modularisierung implementiert

Dieses Mal zeige ich Ihnen, wie Vue den lokalen Umfang und die Modularisierung implementiert und welche Vorsichtsmaßnahmen für die Implementierung des lokalen Umfangs und der Modularisierung gelten. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

CSS-Module geben jeder lokalen Klasse einen global eindeutigen Klassennamen, sodass sich Komponentenstile nicht gegenseitig beeinflussen. Zum Beispiel:

/* button.css */
.button {
 font-size: 16px;
}
.mini {
 font-size: 12px;
}

Es wird in etwa so umgewandelt:

/* button.css */
.button__button--d8fj3 {
 font-size: 16px;
}
.button__mini--f90jc {
 font-size: 12px;
}

Beim Importieren einer CSS-Moduldatei erhalten wir das Zuordnungsobjekt des lokalen Klassennamens zum globalen Klassennamen. So:

import styles from './button.css'
// styles = {
// button: 'button__button--d8fj3',
// mini: 'button__mini--f90jc'
// }
element.innerHTML = '<button class="&#39; + styles.button + &#39; &#39; + styles.mini + &#39;" />'

vue-css-modules: Vereinfachte Klassennamenzuordnung

Hier ist eine Schaltflächenkomponente, die CSS-Module verwendet:

<template>
 <button :class="{
 &#39;global-button-class-name&#39;: true,
 [styles.button]: true,
 [styles.mini]: mini
 }">点我</button>
</template>
<script>
 import styles from './button.css'
 export default {
 props: { mini: Boolean },
 data: () => ({ styles })
 }
</script>

Tatsächlich sind CSS-Module eine gute Wahl für Vue-Komponenten. Es gibt aber auch folgende Mängel:

• Sie müssen Stile in Daten übergeben

• Sie müssen Styles.localClassName verwenden, um die globale Klasse zu importieren Name

• Wenn es andere globale Klassennamen gibt, müssen Sie diese zusammenfügen

• Wenn Sie an den Eigenschaftswert der Komponente binden möchten , auch wenn es lokal ist. Der Klassenname ist derselbe wie der Attributname. Sie müssen auch explizit

• 
  

angeben. Verwenden Sie für die Schaltflächenkomponente oben vue-css-modules. Nachher: ​​

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

Jetzt:

• Sie müssen keine Stile in Daten übergeben, aber Sie müssen Übergeben Sie Stile in Mixins: full_moon_with_face:

• Sie können sich von „styles.localClassName“ verabschieden

• Fügen Sie den lokalen Klassennamen in das styleName-Attribut ein und die globaler Klassenname im Klassenattribut, was viel übersichtlicher ist

• Der lokale Klassenname bindet die Eigenschaft der Komponente mit demselben Namen, fügen Sie einfach davor hinzu: Modifikator

Modifikator

@button

<button styleName="@button">按钮</button>

Dies entspricht:

<button styleName="button" data-component-button="true">按钮</button>

Dadurch können Sie den Stil der Komponente extern zurücksetzen:

.form [data-component-button] {
 font-size: 20px;
}

$type

<button styleName="$type">按钮</button>

Dies entspricht:

<button :styleName="type">按钮</button>

:mini

<button styleName=":mini">按钮</button>

Dies entspricht:

<button :styleName="mini ? &#39;mini&#39; : &#39;&#39;">按钮</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按钮</button>

Dies entspricht:

<button :styleName="isDisabled ? &#39;disabled&#39; : &#39;&#39;">按钮</button>

Verwendung

Verwendung in der Vue-Vorlage

CSS-Modul außerhalb der Vorlage einführen

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

CSS-Modul innerhalb der Vorlage verwenden

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 export default {
 mixins: [CSSModules()],
 props: { mini: Boolean }
 }
</script>
<style module>
 .button {
 font-size: 16px;
 }
 .mini {
 font-size: 12px;
 }
</style>

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render() {
 return (
  <button styleName="@button :mini">点我</button>
 )
 }
}

in der Vue-Rendering-Funktion verwenden Andere verwandte Artikel!

Empfohlene Lektüre:

Verwenden Sie JS, um Bilder zu bearbeiten, so dass nur Schwarzweiß übrig bleibt

Kapseln Sie Vue2-Routing-Navigations-Hooks und Verwenden Sie sie im tatsächlichen Kampf. Verwenden Sie

Das obige ist der detaillierte Inhalt vonWie Vue lokalen Umfang und Modularisierung implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!