Vue3 v-cloak Direktive

Vue3 内置指令Vue3 Eingebaute Direktiven

v-cloakDie Direktive wird verwendet, um unkompilierte Templates auszublenden, bis die Komponenteninstanz bereit ist.

Grundlegende Erklärung

v-cloakDie Direktive wird verwendet, um das Problem des "unkompilierten Template-Flashs" bei der Verwendung von DOM-Templates zu lösen. Wenn Benutzer die Seite besuchen, sehen sie möglicherweise die rohen{{ }}Mustache-Tags, bis die Vue-Komponente gemountet wird und den Inhalt rendert.

v-cloakEs bleibt auf dem Element, bis die zugehörige Komponenteninstanz gemountet ist. In Kombination mit CSS-Regeln kann es das rohe Template während dieser Zeit ausblenden.

  • Erwarteter Typ: Keiner (akzeptiert keine Ausdrücke)
  • Zweck: Blendet unkompilierte Templates aus, bis die Komponente bereit ist.

Hinweis: Diese Direktive wird nur in Setups ohne Build-Schritt benötigt.

Grundlegende Verwendung

Bei Verwendungv-cloak, müssen Sie es mit CSS-Regeln kombinieren:

Beispiel

/* CSS-Regel: Elemente mit v-cloak ausblenden */
[v-cloak] {
  display: none;
}

Beispiel

<div v-cloak>
  {{ message }}
</div>

Wenn die Kompilierung abgeschlossen ist,v-cloakDas Attribut wird automatisch vom Element entfernt und das Element wird angezeigt.

Anwendungsfälle

v-cloakWird hauptsächlich in den folgenden Szenarien verwendet:

1. Vue über CDN importieren

Wenn Vue über CDN ohne Build-Schritt importiert wird, kann die Vorlage während des kurzen Zeitraums zwischen dem Laden der Seite und dem Vue-Skript möglicherweise noch nicht kompiliert sein:

Beispiel

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-cloak>
      {{ message }}
    </div>
  </div>

  <script>
    const { createApp } = Vue

    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

2. Komplexe Template-Strukturen

Bei komplexen Templates mit mehreren Datenbindungen verhindert v-cloak, dass Benutzer ungerenderten Inhalt sehen:

Beispiel

<div v-cloak>
  <h1>{{ title }}</h1>
  <p>Willkommen, {{ username }}</p>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</div>

Wie v-cloak funktioniert

  1. Wenn die Seite geladen wird, ist Vue noch nicht initialisiert, und dasv-cloakAttribut existiert auf dem Element.
  2. CSS-Regeln[v-cloak] { display: none; }blenden diese Elemente aus.
  3. Vue initialisiert und kompiliert das Template, wodurch reaktive Daten erstellt werden.
  4. Nachdem die Komponente gemountet wurde, entfernt Vue automatisch dasv-cloakAttributs.
  5. Elemente werden sichtbar und zeigen den gerenderten Inhalt an.

Hinweise

Nur für Szenarien ohne Build-Schritt: Bei der Verwendung von Build-Tools (wie Vite, Webpack) ist das Template bereits während der Build-Phase kompiliert, daher wird v-cloak nicht benötigt.

Beispiel

/* Stellen Sie sicher, dass die v-cloak-Regel vor allen Styles geladen wird */
/* Es wird empfohlen, das CSS im head zu platzieren */

<head>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

Muss mit CSSverwendet werden: v-cloak selbst versteckt keine Inhalte; es muss mit CSS-Regeln kombiniert werden, um zu wirken.

Unterschiede zu modernen Build-Tools

Bei der Verwendung moderner Build-Tools (wie Vite) ist v-cloak nicht erforderlich, weil:

  • Das Template wird während der Build-Phase vorkompiliert
  • Das JavaScript wird nach dem Bundling inline eingebettet oder asynchron geladen
  • Das anfängliche HTML enthält keine unkompilierte Template-Syntax

Daher wird v-cloak hauptsächlich bei traditionellen CDN-Importmethoden oder einfachen HTML-Seitenszenarien verwendet.

Vue3 内置指令Vue3 Eingebaute Direktiven

Andere Erweiterungen