Detailed explanation of Vue Notepad example

<section id="todoapp">
      <!-- Input box-->
      <header class="header">
        <h1>Notepad</h1>
        <input
                v-model="note"
          autofocus="autofocus"
          autocomplete="off"
          placeholder="Please enter the task"
          class="new-todo"
        />
        <div style="text-align: right;width: 90%;height: 3%;">
          <button value="Record" style="text-align: center" @click="addnote">Record</button>
        </div>

      </header>
      <!-- List area -->
      <section class="main">
        <ul class="todo-list">
          <li class="todo" v-for="(n,index) in notes">
            <div class="view">
              <span class="index">{{index+1}}</span> <label>{{n}}</label>
              <button class="destroy"></button>
            </div>
          </li>

        </ul>
      </section>
      <!-- Statistics and clearing -->
      <footer class="footer">
        <span class="todo-count"><strong>{{notes.length}}</strong> items left </span>
        <button class="clear-completed" @click="delnote">
          Clear
        </button>
      </footer>
    </section>
      <script>
      let vue = new Vue({
        el:"#todoapp",
        data:{
          note:"Study hard and make progress every day",
          index:0,
          notes:[
                  "Write code",
                  "Eat, Eat",
                  "Sleep"
          ]
        },
        methods:{
          addnote:function () {
            this.notes.push(this.note);
          },
          delnote:function () {
            this.notes = [];
          }
        }
      });
</script>