VueのTodoListケースの詳しい説明

<テンプレート>
  <div id="ルート">
    <div class="todo-container">
      <div class="todo-wrap">
        <トップ:received="受信済み" />
        <リスト :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
        <下部 :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo" />
      </div>
    </div>
  </div>
</テンプレート>
<スクリプト>
  './components/Top.vue' から Top をインポートします。
  './components/Bottom.vue' から Bottom をインポートします。
  './components/List.vue' からリストをインポートします。
  エクスポートデフォルト{
    名前: 'アプリ'、
    コンポーネント:
      トップ、
      リスト、
      底
    },
    データ（） {
      戻る {
        すべて: [{
            id: '001',
            タイトル:「食べる」
            完了: true
          },
          {
            id: '002',
            タイトル:「眠り」
            完了: false
          },
          {
            id: '003',
            タイトル: 「Playing Beans」、
            完了: false
          },
        ]
      }
    },
    メソッド: {
      //ToDoを追加
      受信した(todoObj) {
        todoObj を unshift します。
      },
      //ToDoのチェックを外す
      チェックTodo(id) {
        this.todos.forEach((todo) => {
          //関数本体if (todo.id === id) todo.done = !todo.done;
        })
      },
      //TodoIDを削除する{
        this.todos = this.todos.filter(todo => todo.id !== id)
      },
      //すべて選択または選択解除 checkAllTodo(done) {
        this.todos.forEach((todo) => {
          todo.done = 完了
        })
      },
      // 完了したデータをすべてクリアする clearAllTodo() {
        this.todos = this.todos.filter((todo) => {
          !todo.done を返す
        })
      }
    }
  }
</スクリプト>
<スタイル lang="css">
  /*ベース*/
  体 {
    背景: #fff;
  }
  .btn{
    表示: インラインブロック;
    パディング: 4px 12px;
    下マージン: 0;
    フォントサイズ: 14px;
    行の高さ: 20px;
    テキスト配置: 中央;
    垂直位置合わせ: 中央;
    カーソル: ポインタ;
    ボックスシャドウ: インセット 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    境界線の半径: 4px;
  }
  .btn-危険{
    色: #fff;
    背景色: #da4f49;
    境界線: 1px 実線 #bd362f;
  }
  .btn-危険:ホバー{
    色: #fff;
    背景色: #bd362f;
  }
  .btn:フォーカス {
    アウトライン: なし;
  }
  .todoコンテナ{
    幅: 600ピクセル;
    マージン: 0 自動;
  }
  .todoコンテナ .todoラップ {
    パディング: 10px;
    境界線: 1px 実線 #ddd;
    境界線の半径: 5px;
  }
</スタイル>