Detaillierte Erklärung des Vue Notepad-Beispiels

<Abschnitts-ID="todoapp">
      <!-- Eingabefeld-->
      <header Klasse="header">
        <h1>Notizblock</h1>
        <Eingabe
                v-model="Hinweis"
          autofocus="Autofokus"
          Autovervollständigung = "aus"
          Platzhalter="Bitte geben Sie die Aufgabe ein"
          Klasse="Neue Aufgaben"
        />
        <div style="text-align: right;width: 90%;height: 3%;">
          <button value="Aufzeichnen" style="text-align: center" @click="addnote">Aufzeichnen</button>
        </div>

      </header>
      <!-- Listenbereich -->
      <Abschnitt Klasse="main">
        <ul Klasse="Aufgabenliste">
          <li class="todo" v-for="(n,index) in Notizen">
            <div Klasse="Ansicht">
              <span class="index">{{index+1}}</span> <label>{{n}}</label>
              <button Klasse="zerstören"></button>
            </div>
          </li>

        </ul>
      </Abschnitt>
      <!-- Statistik und Löschen -->
      <Fußzeilenklasse="Fußzeile">
        <span class="todo-count"><strong>{{notes.length}}</strong> Elemente übrig </span>
        <button class="clear-completed" @click="delnote">
          Klar
        </button>
      </Fußzeile>
    </Abschnitt>
      <Skript>
      lass vue = neues Vue({
        el:"#todoapp",
        Daten:{
          Hinweis: „Lerne fleißig und mache jeden Tag Fortschritte“,
          Index: 0,
          Anmerkungen:[
                  "Code schreiben",
                  "Essen, Essen",
                  "Schlafen"
          ]
        },
        Methoden:{
          Hinweis hinzufügen:Funktion () {
            dies.notes.push(diese.note);
          },
          delnote:Funktion () {
            diese.notes = [];
          }
        }
      });
</Skript>