Example of implementing todo application with Vue
backgroundFirst 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 applicationThe 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:
Although the demo is simple, it contains all the core functions of Vue.
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:
|
<<: 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
Recommend
Detailed explanation of Vue element plus multi-language switching
Table of contents Preface How to switch between m...
Example of removing json backslash in php
1. Remove backslashes through the "stripslas...
Analysis of mysql view functions and usage examples
This article uses examples to illustrate the func...
Use of Docker UI, a Docker visualization management tool
1. Introduction to DockerUI DockerUI is based on ...
MySQL 5.7.18 installation and configuration method graphic tutorial (CentOS7)
How to install MySQL 5.7.18 on Linux 1. Download ...
About Vue to eliminate repeated prompts when refreshing the page when the Token expires
When the token expires, refresh the page. If the ...
Three ways to realize the horizontal centering of elements and the understanding of the concepts of fixed layout and flow layout
The property of centering text in CSS is very simp...
How to install and deploy ftp image server in linux
Refer to the tutorial on setting up FTP server in...
Detailed explanation of small state management based on React Hooks
Table of contents Implementing state sharing base...
Detailed explanation of the implementation principle of Vue2.0/3.0 two-way data binding
The implementation principle of Vue2.0/3.0 two-wa...
Detailed steps to build the TypeScript environment and deploy it to VSCode
Table of contents TypeScript environment construc...
How to use jsx syntax correctly in vue
Table of contents Preface Virtual DOM What is Vir...
A brief analysis of SQL examples for finding uncommitted transactions in MySQL
A long time ago, I summarized a blog post titled ...
Linux system opens ports 3306, 8080, etc. to the outside world, detailed explanation of firewall settings
Many times, after we install a web service applic...
In-depth explanation of the locking mechanism in MySQL InnoDB
Written in front A database is essentially a shar...