Vue Notepadの例の詳細な説明

<セクション id="todoapp">
      <!-- 入力ボックス-->
      <ヘッダークラ​​ス="ヘッダー">
        <h1>メモ帳</h1>
        <入力
                v-model="note"
          オートフォーカス="オートフォーカス"
          オートコンプリート="オフ"
          placeholder="タスクを入力してください"
          クラス="新しいtodo"
        />
        <div スタイル="text-align: right;幅: 90%;高さ: 3%;">
          <button value="記録" style="text-align: center" @click="addnote">記録</button>
        </div>

      </ヘッダー>
      <!-- リストエリア -->
      <セクションクラス="main">
        <ul class="todo-list">
          <li class="todo" v-for="(n,index) メモ内">
            <div class="view">
              <span class="index">{{index+1}}</span> <label>{{n}}</label>
              <button class="destroy"></button>
            </div>
          </li>

        </ul>
      </セクション>
      <!-- 統計とクリア -->
      <フッタークラス="フッター">
        <span class="todo-count"><strong>残り {{notes.length}}</strong> 項目 </span>
        <button class="clear-completed" @click="delnote">
          クリア
        </ボタン>
      </フッター>
    </セクション>
      <スクリプト>
      Vue = new Vue({
        el:"#todoapp",
        データ：{
          注:「一生懸命勉強して毎日進歩しましょう」
          インデックス:0,
          注記:[
                  「コードを書く」
                  「食べろ、食べろ」
                  "寝る"
          ]
        },
        方法:{
          追加ノート:関数() {
            this.notes.push(this.note);
          },
          delnote:関数() {
            this.notes = [];
          }
        }
      });
</スクリプト>