Detailed explanation of Vue Notepad example

This article example shares the specific code of Vue to implement the notepad function for your reference. The specific content is as follows

The example does not have many functional points. The main difficulty lies in adding and deleting the note text object array and binding synchronization events to components.

Core code

<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>

For tutorials on vue.js components, please click on the special vue.js component learning tutorial to learn.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Detailed exploration of vuex 2.0 and building a notepad application using vuejs 2.0 + vuex 2.0
Local notepad example based on vue2.0+vuex+localStorage
Vue implementation of notepad case
Vue implements simple notepad
Vue implements simple notepad function
Vue implements small notepad function
Detailed explanation of vue simple notepad development
Vue implements notepad function
vue-cli+webpack notepad project creation
Vuex implements notepad function

<<: Detailed explanation of MySQL subqueries (nested queries), join tables, and combined queries

>>: A brief analysis of how to set the initial value of Linux root