Die Umsetzung von Youdas neuem Petite-Vue

Inhaltsverzeichnis

Vorwort
Einführung
Live

Einfach zu bedienen
Stammbereich
Angeben des Mount-Elements
Lebenszyklus
Komponenten
Globale Statusverwaltung
Benutzerdefinierte Anweisungen
Integrierte Anweisungen
Wird nicht unterstützt

Zusammenfassen

Vorwort

Ich habe You Dadas GitHub geöffnet und etwas namens petite-vue gefunden. Wow, ich bin noch nicht fertig mit dem Lernen von Vue3 und Vite und fange an, neue Dinge zu entwickeln? Schauen wir uns mit der Einstellung, bis zum Tod zu lernen, an, was dieses Ding ist. Schließlich ist er unser Vorfahre!

Einführung

Aus dem Namen können wir erkennen, dass Petite-Vue eine Miniversion von Vue ist. Mit einer Größe von nur 5,8 KB kann man sagen, dass sie sehr klein ist. Laut You Dada ist petite-vue eine alternative Distribution von Vue, die für progressive Verbesserung optimiert ist. Es bietet dieselbe Vorlagensyntax und dasselbe reaktionsfähige Modell wie Standard-Vue:

Die Größe beträgt nur 5,8 KB
Vue-kompatible Vorlagensyntax
DOM-basierte, direkte Konvertierung
Reaktionsschneller Antrieb

Live

Im Folgenden finden Sie eine Einführung in die Verwendung von Petite-Vue.

Einfach zu bedienen

<Text>
  <script src="https://unpkg.com/petite-vue" Initialisierung verschieben></script>
  <div v-scope="{ Anzahl: 0 }">
    <button @click="Anzahl--">-</button>
    <span>{{ Anzahl }}</span>
    <button @click="Anzahl++">+</button>
  </div>
</body>

Importieren Sie es über das Skript-Tag und fügen Sie gleichzeitig init hinzu. Anschließend können Sie v-scope zum Binden der Daten verwenden, sodass ein einfacher Zähler realisiert wird.

Wer mit dem Alpine.js-Framework vertraut ist, kommt sich vielleicht damit aus, da die Syntax beider Frameworks sehr ähnlich ist.

<!-- Alpine.js -->
<div x-data="{ öffnen: false }">
  <button @click="open = true">Dropdown-Menü öffnen</button>
  <ul x-show="öffnen" @click.away="öffnen = false">
    Dropdown-Text
  </ul>
</div>

Zusätzlich zur Init-Methode können Sie auch die folgende Methode verwenden:

<Text>
  <div v-scope="{ Anzahl: 0 }">
    <button @click="Anzahl--">-</button>
    <span>{{ Anzahl }}</span>
    <button @click="Anzahl++">+</button>
  </div>
  <!-- Unten im Textkörper platzieren -->
  <script src="https://unpkg.com/petite-vue"></script>
  <Skript>
    PetiteVue.createApp().mount()
  </Skript>
</body>

Oder mit dem ES-Modul:

<Text>
  <Skripttyp="Modul">
    importiere { createApp } von 'https://unpkg.com/petite-vue?module'
    App erstellen().mount()
  </Skript>
  
  <div v-scope="{ Anzahl: 0 }">
    <button @click="Anzahl--">-</button>
    <span>{{ Anzahl }}</span>
    <button @click="Anzahl++">+</button>
  </div>  
</body>

Stammbereich

Die Funktion „createApp“ kann ein Objekt akzeptieren, ähnlich wie wir normalerweise Daten und Methoden verwenden, aber v-scope muss keinen Wert binden.

<Text>
  <Skripttyp="Modul">
    importiere { createApp } von 'https://unpkg.com/petite-vue?module'
    erstelleApp({
      Anzahl: 0,
      inkrementieren() {
        dies.zählen++
      },
      dekrementieren() {
        diese.Anzahl--
      }
    }).montieren()
  </Skript>
  
  <div v-Bereich>
    <button @click="dekrementieren">-</button>
    <span>{{ Anzahl }}</span>
    <button @click="Erhöhen">+</button>
  </div>
</body>

Angeben des Mount-Elements

<Text>
  <Skripttyp="Modul">
    importiere { createApp } von 'https://unpkg.com/petite-vue?module'
    erstelleApp({
      Anzahl: 0
    }).mount('#App')
  </Skript>
  
  <div id="app">
    {{ zählen }}
  </div>
</body>

Lebenszyklus

Sie können die Lebenszyklusereignisse jedes Elements anhören.

<Text>
  <Skripttyp="Modul">
    importiere { createApp } von 'https://unpkg.com/petite-vue?module'
    erstelleApp({
      onMounted1(el) {
        console.log(el) // <span>1</span>
      },
      onMounted2(el) {
        console.log(el) // <span>2</span>
      }
    }).mount('#App')
  </Skript>
  
  <div id="app">
    <span @mounted="onMounted1($el)">1</span>
    <span @mounted="onMounted2($el)">2</span>
  </div>
</body>

Komponenten

In Petite-Vue können Komponenten mithilfe von Funktionen erstellt und über Vorlagen wiederverwendet werden.

<Text>
  <Skripttyp="Modul">
  importiere { createApp } von 'https://unpkg.com/petite-vue?module'

  Funktion Zähler(Eigenschaften) {
    zurückkehren {
      $template: '#Zählervorlage',
      Anzahl: props.initialCount,
      inkrementieren() {
        dies.zählen++
      },
      dekrementieren() {
        dies.zählen++
      }
    }
  }

  erstelleApp({
    Schalter
  }).montieren()
</Skript>

<template id="Zählervorlage">
  <button @click="dekrementieren">-</button>
  <span>{{ Anzahl }}</span>
  <button @click="Erhöhen">+</button>
</Vorlage>

<!-- Wiederverwenden -->
<div v-scope="Zähler({ initialCount: 1 })"></div>
<div v-scope="Zähler({ initialCount: 2 })"></div>
</body>

Globale Statusverwaltung

Mit der reaktiven API ist es einfach, ein globales Statusmanagement zu erstellen

<Text>
  <Skripttyp="Modul">
    importiere { createApp, reaktiv } von 'https://unpkg.com/petite-vue?module'

    const store = reaktiv({
      Anzahl: 0,
      inkrementieren() {
        dies.zählen++
      }
    })
    //Anzahl um 1 erhöhen
    speichern.inkrementieren()
    erstelleApp({
      speichern
    }).montieren()
  </Skript>

  <div v-Bereich>
    <!-- Ausgabe 1 -->
    <span>{{ Filialenanzahl }}</span>
  </div>
  <div v-Bereich>
    <button @click="store.increment">+</button>
  </div>
</body>

Benutzerdefinierte Anweisungen

Hier implementieren wir einfach einen Befehl zum automatischen Fokussieren eines Eingabefelds.

<Text>
  <Skripttyp="Modul">
    importiere { createApp } von 'https://unpkg.com/petite-vue?module'
    
    const autoFocus = (ctx) => {
      ctx.el.fokus()
    }

    createApp().direktive('Autofokus', autoFocus).mount()
  </Skript>

  <div v-Bereich>
    <Eingabe v-Autofokus />
  </div>
</body>

Integrierte Anweisungen

V-Modell
v-wenn / v-sonst / v-sonst-wenn
v-für
V-Show
v-html
v-text
v-vor
v-einmal
V-Umhang

Hinweis: v-for erfordert keinen Schlüssel und v-for unterstützt keine tiefe Destrukturierung

<Text>
  <Skripttyp="Modul">
    importiere { createApp } von 'https://unpkg.com/petite-vue?module'
    
    erstelleApp({
      Benutzerliste: [
        { Name: '张三', Alter: { a: 23, b: 24 } },
        { Name: 'Li Si', Alter: { a: 23, b: 24 } },
        { Name: '王五', Alter: { a: 23, b: 24 } }
      ]
    }).montieren()
  </Skript>

  <div v-Bereich>
    <!-- Unterstützung -->
    <li v-for="{ Alter } in Benutzerliste">
      {{ Alter.a }}
    </li>
    <!-- Nicht unterstützt -->
    <li v-for="{ Alter: { a } } in Benutzerliste">
      {{ A }}
    </li>
  </div>
</body>

Wird nicht unterstützt

Um leichter und kompakter zu sein, unterstützt petite-vue die folgenden Funktionen nicht:

ref(), berechnet
Renderfunktion, da Petite-Vue keinen virtuellen DOM hat
Unterstützt keine Map-, Set- und anderen Antworttypen
Übergang, KeepAlive, Teleport, Spannung
v-on="Objekt"
v-ist &
v-bind:Stil automatisches Präfixieren

Zusammenfassen

Das Obige ist eine kurze Einführung und Verwendung von Petite-Vue. Es liegt an Ihnen, weitere neue Erkundungen zu entdecken.

Im Allgemeinen behält petite-vue einige grundlegende Funktionen von Vue bei, sodass Vue-Entwickler es kostenlos verwenden können. Wenn wir in der Vergangenheit bei der Entwicklung einiger kleiner und einfacher Seiten auf Vue verweisen wollten, gaben wir aufgrund der Paketgröße oft auf. Das Aufkommen von petite-vue könnte diese Situation nun retten. Schließlich ist es wirklich klein und nur 5,8 KB groß, was etwa der Hälfte von Alpine.js entspricht.

Dies ist das Ende dieses Artikels über die Implementierung von Youdadas neuem Petite-Vue. Weitere verwandte Vue-Petite-Inhalte 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!

Das könnte Sie auch interessieren:

Vue referenziert auf mehrere Arten von JS-Dateien (empfohlen)
Detaillierte Erläuterung der vier Möglichkeiten des Vue-Routing-Sprungs (mit Parametern)
Ausblenden und Anzeigen von VUE-Elementen (v-show-Direktive)
Drei Möglichkeiten zum Hochladen von Bildern mit Vue
Funktion der erstellten Methode in vue.js
Zusammenfassung gängiger Vue.js-Anweisungen (v-if, v-for usw.)
Vue.js tatsächlicher Kampf mit Vue-Router, um zur Seite zu springen
So verwenden Sie Cookie-Operationsbeispiele in Vue

<<: Mounten Sie die Festplatte in einem Verzeichnis unter Ubuntu 18.04

>>: Detaillierte Erklärung zum Erstellen einer Datentabelle in MySQL und zum Herstellen von Primär- und Fremdschlüsselbeziehungen