Detaillierte Erklärung des TodoList-Falls von Vue

<Vorlage>
  <div id="Wurzel">
    <div Klasse="todo-container">
      <div Klasse="todo-wrap">
        <Top :received="empfangen" />
        <Liste :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
        <Unten :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo" />
      </div>
    </div>
  </div>
</Vorlage>
<Skript>
  Importiere Top aus „./components/Top.vue“
  Importiere Bottom aus „./components/Bottom.vue“
  Liste aus „./components/List.vue“ importieren
  Standard exportieren {
    Name: "App",
    Komponenten:
      Spitze,
      Liste,
      Unten
    },
    Daten() {
      zurückkehren {
        alle: [{
            ID: '001',
            Titel: 'Essen',
            erledigt: wahr
          },
          {
            ID: '002',
            Titel: 'Schlaf',
            erledigt: falsch
          },
          {
            ID: '003',
            Titel: 'Spielende Bohnen',
            erledigt: falsch
          },
        ]
      }
    },
    Methoden: {
      //Eine Aufgabe hinzufügen
      empfangen(todoObj) {
        dies.todos.unshift(todoObj);
      },
      //Todo deaktivieren
      checkTodo(id) {
        dies.todos.forEach((todo) => {
          //Funktionskörperif (todo.id === id) todo.done = !todo.done;
        })
      },
      //Todo löschen(id) {
        dies.todos = dies.todos.filter(todo => todo.id !== id)
      },
      //Alles auswählen oder Auswahl für alle aufheben checkAllTodo(done) {
        dies.todos.forEach((todo) => {
          todo.done = erledigt
        })
      },
      // Alle abgeschlossenen Daten löschen clearAllTodo() {
        dies.todos = dies.todos.filter((todo) => {
          returniere !todo.done
        })
      }
    }
  }
</Skript>
<style lang="css">
  /*Base*/
  Körper {
    Hintergrund: #fff;
  }
  .btn {
    Anzeige: Inline-Block;
    Polsterung: 4px 12px;
    Rand unten: 0;
    Schriftgröße: 14px;
    Zeilenhöhe: 20px;
    Textausrichtung: zentriert;
    vertikale Ausrichtung: Mitte;
    Cursor: Zeiger;
    Boxschatten: Einschub 0 1px 0 rgba(255, 255, 255, 0,2), 0 1px 2px rgba(0, 0, 0, 0,05);
    Rahmenradius: 4px;
  }
  .btn-Gefahr {
    Farbe: #fff;
    Hintergrundfarbe: #da4f49;
    Rand: 1px durchgezogen #bd362f;
  }
  .btn-danger:hover {
    Farbe: #fff;
    Hintergrundfarbe: #bd362f;
  }
  .btn:Fokus {
    Gliederung: keine;
  }
  .todo-container {
    Breite: 600px;
    Rand: 0 automatisch;
  }
  .todo-container .todo-wrap {
    Polsterung: 10px;
    Rand: 1px durchgezogen #ddd;
    Rahmenradius: 5px;
  }
</Stil>