Ausführliche Erklärung zu Slots und Filtern in Vue

// Steckplatz.vue

<Vorlage>
  <div>
    <div>
      <!--Der Inhalt der Verteilung wird an diese Slot-Tag-Position übertragen-->
      <Steckplatz></Steckplatz>
    </div>
    <p>Konto: <input /></p>
    <p>Passwort: <input type="password" /></p>
    <button>Anmelden</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {};
</Skript>

<Stil>
</Stil>

// SlotTest.vue

<Vorlage>
  <div>
    <slotCom>
        <h2>Ich bin der Inhalt, der an den Slot verteilt wird</h2>
    </slotCom>
  </div>
</Vorlage>

<Skript>
// Importieren Sie „import slotCom“ von „../views/slot“;

Standard exportieren {
  Komponenten:
    slotCom
  },
}
</Skript>

<Stil>
</Stil>

<navigation-link url="/profil">
  Angemeldet als {{ user.name }}
</navigation-link>

<navigation-link url="/profil">
  Wenn Sie hier klicken, werden Sie weitergeleitet zu: {{ url }}

  /* „URL“ ist hier undefiniert, da ihr Inhalt an den <Navigationslink> _übergeben_ wird und nicht *innerhalb* der <Navigationslink>-Komponente definiert ist.
  */
</navigation-link>

// Eine Schaltflächenkomponente. Legen Sie den Fallback-Inhalt auf Text „Senden“ fest.
<button type="senden">
  <slot>Senden</slot>
</button>

// Wenn ich <Submit-Button> in einer übergeordneten Komponente verwende und keinen Slot-Inhalt angebe:
<Senden-Schaltfläche></Senden-Schaltfläche>

// Der Fallback-Inhalt „Senden“ wird gerendert:
<button type="senden">
  Einreichen
</button>

// Aber wenn wir Inhalte bereitstellen:
<Senden-Schaltfläche>
  Speichern
</Absenden-Schaltfläche>

// dann wird der bereitgestellte Inhalt anstelle des Fallback-Inhalts gerendert:
<button type="senden">
  Speichern
</button>

// Login-Komponente.vue

<Vorlage>
    <div>
        <div>
            <slot>Inhalt sichern</slot>
        </div>
        <p>
            Konto: <slot name="user"></slot>
        </p>
        <p>
            Passwort: <slot name="psd"></slot>
        </p>

        <button>Anmelden</button>
        <Steckplatz></Steckplatz>
    </div>
</Vorlage>

// Verwenden von <login-component>
        <h2>Ich bin der Inhalt, der an den Slot verteilt wird</h2>

        <Vorlage v-slot:Benutzer>    
            <!-- Der gesamte Inhalt hier wird in den Slot name="user" eingefügt-->
            <div>
                123
            </div>
        </Vorlage>


        <input slot="psd" type="password" placeholder="Dieses Element wird in den name=psd-Slot eingefügt">
        <Komponente-a slot="psd"></Komponente-a> 

</Anmeldekomponente>

<Anmeldekomponente>
            <h2>Ich bin der Inhalt, der an den Slot verteilt wird</h2>

            <Vorlage #Benutzer>    
                Der gesamte Inhalt hier wird in den Slot name="user" <div> eingefügt.
                    123
                </div>
            </Vorlage>


            <Vorlage #psd>    
               <input type="password" placeholder="Dieses Element wird in den name=psd-Slot eingefügt">
            </Vorlage>
</Anmeldekomponente>

<div id="app">
    {{str | capitalize}} // Hallo
</div>

// Den ersten Buchstaben des Wortes groß schreiben Vue.filter('capitalize', function (value) {
  wenn (!Wert) return ''
  Wert = Wert.toString()
  Rückgabewert.charAt(0).toUpperCase() + Wert.slice(1)
})

neuer Vue({
    el: '#app',
    Daten: {
        str: 'hallo'
    }
})

<div id="app">
    <div v-for="(f,i) in Freunde" :key="i">
        <h3>Name: {{f.name}} </h2>
        <p>Alter: {{f.age}}</p>
        <p>Geschlecht: {{f.sex|getSex}}</p>
    </div>
</div>

<Skript>
    neuer Vue({
        el: '#app',
        Daten: {
            Freunde: [{
                    Name: 'Max',
                    Geschlecht: 0,
                    Alter: 19
                },
                {
                    Name: 'Jack',
                    Geschlecht: 1,
                    Alter: 22
                },
                {
                    Name: 'Jacose',
                    Geschlecht: 1,
                    Alter: 19
                },
                {
                    Name: 'Tim',
                    Geschlecht: 1,
                    Alter: 18
                },
                {
                    Name: 'Jimmy',
                    Geschlecht: 0,
                    Alter: 20
                },
                {
                    Name: 'Tom',
                    Geschlecht: 0,
                    Alter: 19
                },
            ]
        },
        Filter:
            getSex(Typ) {
                wenn (Typ === 0) {
                    returniere 'männlich'
                }
                returniere 'weiblich'
            }
        }
    })
</Skript>

<div>{{'hallo' | substr(3,4)}}</div>
<Skript>
{
    Filter:
       substr(str,Start,Ende) {
           gibt str.substr(Start, Ende) zurück
       } 
    }
}
</Skript>

// Beispiel <p>{1599639292100 | getTemplateTimeByDate('YYYY-MM-dd hh:mm:ss')}</p> -> 2020-09-09 15:04:56

<p>{1599639292100 | getTemplateTimeByDate('JJJJ-Md h:m:s')}</p> -> 2020-9-9 15:4:6
<p>{1599639292100 | getTemplateTimeByDate('JJJJ Jahr M Monat d Tag hh:mm')}</p> -> 9. September 2020, 15:04 Uhr

neuer Vue({
    el: '#app',
    Daten: {
        Datum: neues Date().getTime()
    },
    Filter:
        getTemplateTimeByDate(Datum, Vorlage) {
            Datum = neues Datum(Datum)

            lass ZeitObj = {
                'J+': date.getFullYear(),
                '(M+)': date.getMonth() + 1,
                '(d+)': Datum.getDate(),
                '(h+)': date.getHours(),
                '(m+)': date.getMinutes(),
                '(s+)': date.getSeconds()
            }

            für (Schlüssel in TimeObj) {
                let reg = neuer RegExp(Schlüssel)

                wenn (reg.test(Vorlage)) {
                    Konsole.log(RegExp.$1)
                    let Zeit = TimeObj[Schlüssel]
                    // Bestimmen Sie, ob die aktuelle Vorlagenzeit zweistellig oder einstellig ist. // Wenn es sich um eine zweistellige Zeit handelt, fügen Sie vorne eine Null hinzu, 1 -> 01 
                    // Wenn es eine Ziffer ist, muss keine Null hinzugefügt werden if (RegExp.$1.length > 1) {

                        Zeit = Zeit >= 10 ? Zeit : '0' + Zeit
                    }
                    Vorlage = Vorlage.ersetzen(reg, Zeit)
                }
            }
            Rückgabevorlage
        }
    }
})
</Skript>