Die Umsetzung von Youdas neuem Petite-Vue

<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>

<!-- 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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>