Anweisungen zum Erlernen von Vue

Vorwort:

Die offizielle Vue-Website bietet insgesamt 14 Anweisungen, und zwar wie folgt:

• v-text

• v-html

• v-show
• v-if ☆☆☆
• v-else ☆☆☆
• v-else-if ☆☆☆
• v-for ☆☆☆
• v-on ☆☆☆
• v-bind ☆☆☆
• v-model ☆☆☆
• v-slot

• v-pre

• v-cloak

• v-once

Hinweis : ☆ steht für wichtige und häufig verwendete

1. v-Text (v-Befehlsname = „Variable“, die Variable benötigt Daten um einen Wert bereitzustellen)

<p v-text="info"></p>
<p v-text="'abc' + info"></p>
<Skript>
    neuer Vue({
        el: '#app',
        Daten: {
            Info: „ein“
        }
    })
</Skript>

v-text="info" gibt das Seitenergebnis in a . Da es sich bei info um eine Variable handelt, wird der der Variablen entsprechende Wert direkt angezeigt.

v-text="'abc' + info" gibt das Seitenergebnis als abca aus. Wenn Sie einen String und eine Variable verknüpfen möchten, können Sie dem String einfache Anführungszeichen hinzufügen, damit das Programm ihn als String erkennt. Das Endergebnis der Variable String + Info ist der String abca

2. v-html (kann HTML-Syntax analysieren)

Manchmal geben wir in unserem Vue Objekt oder im Hintergrund ein Stück nativen html Code zurück, den wir rendern müssen. Wenn wir ihn direkt über {{}} rendern, wird der html Code als Zeichenfolge behandelt. Derzeit können wir dies über die v-html -Anweisung erreichen.

Der Beispielcode lautet wie folgt:

<p v-html="'<b>ok</b>'"></p>
<p v-text="'<b>ok</b>'"></p>

Es gibt keinen Unterschied zwischen den beiden obigen Codezeilen, außer dass sie unterschiedliche vue -Anweisungen verwenden. Lassen Sie uns zuerst die Ergebnisse zeigen.

OK
<b>OK</b>

v-html kann html Tags analysieren und text als Zeichenfolge übergeben. Unabhängig vom spezifischen Inhalt der Zeichenfolge werden die ursprünglichen Zeichen direkt angezeigt.

3. v-once (Elemente und Komponenten nur einmal rendern)

Rendern Sie Elemente und Komponenten nur einmal. Bei nachfolgenden erneuten Renderings werden das Element/die Komponente und alle seine untergeordneten Elemente als statischer Inhalt behandelt und übersprungen. Hierdurch kann die Update-Performance optimiert werden.

<input type="text" v-model="msg" v-once> // Nur einmal rendern<p v-once>{{ msg }}</p>  
 

4. V-Cloak (verhindert Seitenflackern)

Diese Direktive bleibt auf dem Element, bis die zugehörige Instanz die Kompilierung abgeschlossen hat. Bei Verwendung mit CSS Regeln wie [ v-cloak] { display: none } kann diese Direktive nicht kompiliertes Mustache -Markup verbergen, bis die Instanz bereit ist.

5. v-pre (Verständnis)

Überspringt die Kompilierung dieses Elements und seiner untergeordneten Elemente. Kann zum Anzeigen roher Mustache -Tags verwendet werden. Das Überspringen einer großen Anzahl von Knoten ohne Anweisungen beschleunigt die Kompilierung.

<div id="app">
  <span v-pre>{{Nachricht}}</span>
</div>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Nachricht: "Hallo"
    }
  })
</Skript>

Normalerweise kompilieren und zeigen wir hello auf der Webseite an, aber nach Verwendung der v-pre Direktive überspringen wir die Kompilierung und zeigen direkt den ursprünglichen Tag-Inhalt an, d. h. {{message}}

6. v-binden

6.1 Bindungseigenschaften

Wenn wir die Variablen in unserem Vue Objekt an die Attribute html Elements binden möchten, müssen wir dazu v-bind verwenden.

<div id="app">
  <a v-bind:href="baidu" rel="external nofollow" >Baidu</a>
  <img :src="imgSrc" alt="">
</div>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Nachricht: "Hallo",
      baidu: „https://www.baidu.com“,
      imgSrc: "upload/2022/web/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
    }
  })
</Skript>

Wir müssen lediglich v-bind : vor die gebundene Eigenschaft setzen. Natürlich können wir auch die Abkürzung: verwenden und einfach einen Doppelpunkt schreiben.

6.2 Bindungsklasse

Es gibt zwei Möglichkeiten, Class zu binden: eine über Array-Bindung, die andere über Objekt-Bindung

Implementiert durch Objekte:

<div id="app">
  <p v-bind:class="{color:isColor}">Hallo Welt</p>
</div>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      istFarbe: true
    }
  })
</Skript>
<Stil>
    .Farbe{
        Farbe: blau;
    }
</Stil>

Die Objektmethode ist wie der Code oben {color:isColor} , key ist color , value ist isColor , und wenn value Wert true ist, wird es gerendert, und wenn er false ist, wird es nicht gerendert.

Dies kann durch die Verwendung eines Arrays erreicht werden:

<div id="app">
  <p :class="[Klassenname1, Klassenname2]">{{Nachricht}}</p>
</div>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Nachricht: "Hallo",
      Klassenname1: "pcolor",
      Klassenname2: "Schriftgröße"
    },
  })
</Skript>
<Stil>
    .pcolor{
        Farbe: rot;
    }
    .Schriftgröße{
        Schriftgröße: 30px;
    }
</Stil>

Wenn class zwei Attribute binden muss, können Sie ein Array verwenden

6.3 Stilbindung

Es gibt auch zwei Möglichkeiten, Stile zu binden: eine besteht in der Bindung über ein Array und die andere in der Bindung über ein Objekt.

Implementiert durch Objekte:

<div id="app">
  <p:style="{fontSize:'100px'}">{{Nachricht}}</p>
</div>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Nachricht: "Hallo"
    }
  })
</Skript>

Hinweis: Beim Binden eines Objekts können Sie nur die CamelCase-Benennungsmethode fontSize verwenden. Sie können font-size nicht verwenden, da sonst ein Fehler gemeldet wird. 100px plus einfache Anführungszeichen ist eine Zeichenfolge, ohne einfache Anführungszeichen ist es eine Variable. Sie müssen die Variable in den Daten hinzufügen.

Dies kann durch die Verwendung eines Arrays erreicht werden:

<div id="app">
  <p:style="[style1, style2]">{{Nachricht}}</p>
</div>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Nachricht: "Hallo",
      Stil1: {Hintergrund:'rot'},
      Stil2: {Schriftgröße:'30px'},
    }
  })
</Skript>

Dies ist das Ende dieses Artikels zum Erlernen von Vue-Befehlen. Weitere relevante Inhalte zu Vue-Befehlen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!