Hello, I haven't learned much today, but I met a very interesting vue case. I think I can take it out for you to practice. Although the case is simple and not complex, it also covers most of the common knowledge points of vue. I hope you can practice more and contribute to vue's learning.
Let's get to the point...
The case is called Xiaohei Notepad. It looks like this
The general function is like this,
1. Enter the content in the input box and click enter to put the entered content into the following list in order,
2. In the process of reloading, the number of records will be automatically counted and displayed in the lower left corner
3. When the mouse clicks the corresponding list item, this data will be deleted and other data will be reordered
4. Click the clear button to clear the data
Start concrete implementation
1, , compilation of basic styles
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Little black Notepad</title> <style> *{ margin: 0 ; padding: 0; background-color: #F0F0F0; } .todo{ background-color: red !important; width: 98%; list-style: none; line-height: 35px; border-top:0.5px solid #E0E0E0; border-bottom:0.5px solid #E0E0E0; border-left:1px solid #E0E0E0; border-right:1px solid #E0E0E0; } #todoapp{ width: 280px; margin: 100px auto; } h1{ font-family:"official script"; font-size: 32px; color: saddlebrown; text-align:center; margin-bottom: 40px; } input::-webkit-input-placeholder { color: #9C9C9C; } .new-todo{ outline: none; width: 95%; height: 35px; border:1px solid #E0E0E0; background-color: white; padding:0 4px; color: #9C9C9C; font-size: 15px; } .view{ display: flex; padding:0 4px; color: #9C9C9C; font-size: 15px; background-color: white; } .index{ flex: 1; background-color: white; } label{ flex: 10; background-color: white; } .destroy{ flex: 1; display: none; color: red; border: none; background-color: white; } .view:hover .destroy{ display: block; } .todo-count{ display: block; width: 95%; line-height: 20px; color: #9C9C9C; font-size: 10px; padding:0 4px; border:0.5px solid #E0E0E0; background-color: white; /*box-shadow:5px 5px 20px rosybrown;*/ box-shadow: 0 0.0625px 0.1875em 0 rgb(0 0 0 / 16%), 0 0.5em 0 -0.25em #f2f2f2ed, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 1), 0 1em 0 -0.5em #e5e5e5, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 1); } strong{ background-color: white; } .todo-clear{ position: relative; background-color: white; color: #9C9C9C; font-size: 10px; top: -24px; left: 250px; border: none; } </style> </head> <body> <section id="todoapp"> <header> <h1>Little black Notepad</h1> <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="Please enter a task" /> </header> <section> <ul> <li v-for="(item,index) in list"> <div> <span>{}</span> <label>{}</label> <button @click="remove(index)">×</button> </div> </li> </ul> </section> <footer> <span> <strong>{}</strong> items left </span> <button @click="clear">clear</button> </footer> </section> </body> <script> var app=new Vue({ el:"#todoapp", data:{ list:[], inputValue:"study hard" }, methods:{ add:function(){ }, remove:function(index){ }, clear:function(){ } } }) </script> </html>
II Add an item to the list based on the input
Here, the bidirectional data binding of the form is used to obtain and add the input content to the array. The data in the array is rendered in the page, so the processing logic can be added to the add function defined in our code
add:function(){ this.list.push(this.inputValue) },
The function has been added
3, Display quantity function
Because our data is defined in the form of an array, we have several pieces of data as long as the array is. Therefore, in the above code, I have used list.length to complete this function
4, Clear function
Because this function is relatively simple, I implement this function first.
The event is triggered when the clear button is clicked. I define it as clear. The logical processing is to simply clear the array in the array
clear:function(){ this.list=[] }
5, Delete item
The delete event is triggered when the mouse clicks on the corresponding event. I define remove here, but we need to use the transfer parameters to the event. Because we need to know which data is deleted, we pass in the corresponding subscript, and then use the slice method of the array to take out the data in the array to realize the function.
I have defined event triggering in the above code, so I only show the logic processing code here remove:function(index){ this.list.splice(index,1); },
Today's little black Notepad function is relatively simple, but there are many details that need to be paid attention to. For example, the original array cannot be changed during logic processing, so as not to affect the rendering of data.
In short, practice more and wish you all progress in your study....