Example of implementing todo application with Vue

background

First of all, I would like to state that I am not an expert in front-end development. If you have read my previous content, you should know that I am good at back-end development. Although I have some experience in front-end development, I cannot say that I am proficient in it, and I am barely even familiar with it. The purpose of writing this series is simply out of curiosity. I am curious about why the front-end situation that was dominated by JQuery a few years ago is so chaotic now. I am curious about how js has been played with so badly that even its mother can't recognize it. The reason why I chose vue as the entry point is entirely because vue is simple and you can get started by basically watching the demo. Since vue is one of the three popular front-end frameworks, as long as you understand how vue is implemented, you will have a little understanding of the front-end. So driven by this idea, this series was created.

Imitating Vue here does not mean that I read the source code of Vue, understood it, and then imitated Vue to write, but the syntax is still the syntax of Vue, but I will find a way to implement it myself. Of course, I can refer to Vue, but it is a bit difficult for me to fully understand Vue with my front-end level. So if you want to understand the implementation of Vue source code, this series is not suitable for you. But if you are like me, you know a little JS, and you have no idea where to start with the Vue source code, but you want to know how to implement the same function as Vue, then follow me, we will not look at the source code, but figure out how to implement a simple Vue by ourselves.

Vue todo application

The idea of this series is to use Vue to implement a simple application, use Vue-related core functions in the application, and then keep the code unchanged, replace the vue.js file with our own implementation, and finally achieve the same effect as Vue. Here we use vue to implement a super simple todo application. The code is as follows:

<html>
  <head>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
      <div id="app">
          <input v-model="newTodo"></input>
          <button v-on:click="addTodo()">Add</button>
          <div>Input text:{{newTodo}}</div>
          <ul>
              <div v-for="(todo,index) in todos" style="margin-bottom: 20px;">
                  <li style="float: left;margin-right: 20px;">
                      {{todo.text}}
                  </li>
                  <button v-on:click="deleteTodo(index)">Delete</button>
              </div>
          </ul>
      </div>
      <script>
          var appx = new Vue({
              el: '#app',
              data: {
                  newTodo: '',
                  todos: []
              },
              methods: {
                  addTodo: function () {
                      this.todos.push({ text: this.newTodo });
                      this.newTodo = '';
                  },
                  deleteTodo: function (index) {
                      this.todos.splice(index, 1);
                  }
              }
          })
      </script>
  </body>
  </html>

The effect is as follows:

When the value of the input box changes, the input content will be displayed below the input box (just for demonstration effect, ignoring the actual meaning)
Every time you enter a new to-do, there will be one more list item below
Click the delete button on the right side of the list item to delete the current list item.

Although the demo is simple, it contains all the core functions of Vue.

Two-way value binding (v-model)
Responsive, when the value changes, the bound node value also changes synchronously
Event response (v-on:click)
Loop Directive (v-for)

In the following chapters, we will not introduce the vue.js file and implement the same functions step by step.

The above is the details of the example of Vue implementing the todo application. For more information about Vue implementing the todo application, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

How to build todoList step by step using VueCli3+TypeScript+Vuex
Detailed explanation of the simple todolist example of vuex
How to manually build Vue development environment with webpack4 to implement todoList project
Vue implements the basic functions of todolist and data storage function examples
Example code for implementing todolist functionality using Vue parent-child component communication
Vue implements todolist deletion function
Development of todolist component function in parent-child component communication in Vue
How to publish the vue todo-list component to npm
Detailed explanation of todolist component example in vue component writing
How to use Vue to complete a simple todolist

<<: Summary of five commands to check swap space in Linux

>>: How to reset the initial value of the auto-increment column in the MySQL table