Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to build our own lightweight framework. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something from this article.

First of all, we make a simple adjustment to our page structure. Bootstrap is added just to make the page less naked and will not have any effect on others.

Demo1 title desc {{todoItem.title}} {{todoItem.desc}} title: desc var TodoItem = function (title, desc) {this.title = title; this.desc = desc } new Vue ({el:'# app', data: {todolist: [], title:', desc:''}, methods: {addItem: function () {this.todolist.push (new TodoItem (this.title, this.desc)) this.title = this.desc =';}, remove: function (index) {this.todolist.splice (index, 1);})

There is no change in js, except that the structure of html has been adjusted slightly after the introduction of bootstrap4. Because we need to add editing operations, we summarize the additional editing operations into the following steps:

1. Add edit button

2. Click the edit button to bind the corresponding todoitem to the form to edit

3. Click the OK button in the form to apply the editing result.

Note: we need to distinguish between the new operation and the edit operation when we click the OK button. We add a self-increasing ID to our data structure to mark it. If the editing project has ID, it is necessary to save the editing operation. If there is no ID, it is a new save operation. Make the following fine adjustments to our data structure. Due to the addition of the ID project, we also need to add the ID attribute to the data attribute. In this way, each time you add an attribute, you have to modify the data attribute directly. This is the change point. Let's simply encapsulate the change point and modify the code as follows:

Data: {todolist: [], todoItem: {id:'', title:'', desc:''}}

In addition, we need to implement self-incrementing ID. Here, the most direct way is global ID, which can be self-incremented to simply handle the closure of TodoItem:

Var TodoItem = (function () {var id = 1; return function (title, desc) {this.title = title; this.desc = desc; this.id = id++;}) ()

In order to adapt to the changes of the new data structure, other modifications are posted as a whole, and the changes are shown in yellow:

Demo1 title desc {{todoItem.title}} {{todoItem.desc}} title: desc var TodoItem = (function () {var id = 1; return function (title, desc) {this.title = title; this.desc = desc; this.id = id++;}}) () New Vue ({el:'# app', data: {todolist: [], todoItem: {id:', title:', desc:'}}, methods: {addItem: function () {/ / this.todolist.push (new TodoItem (this.title, this.desc)) this.todolist.push (new TodoItem (this.todoItem.title, this.todoItem.desc)); this.todoItem= {} }, remove: function (index) {this.todolist.splice (index, 1);})

Refresh the page, and the test results are as follows:

After adding the ID, bind it when you add it. Follow the steps above, add the edit button first, add the edit button after deleting the button, and add the corresponding callback function in the methods object to respond to the edit operation. The function mainly implements the binding operation on the todoItem object. The specific code is modified as follows:

Title desc {{todoItem.id}} {{todoItem.title}} {{todoItem.desc}} methods: {edit: function (id) {/ / find todoitem var obj = this.todolist.filter (v = > v.id = id) [0] with id value equal to the passed parameter; / / bind a pair of data, and the data will respond to this.todoItem = obj on the form },... Omit other}

Is there a problem with this? Let's run it to see the effect:

From the point of view of the running result, we clicked the edit operation and did complete the binding, but when we modified the editor and did not click the OK button, the changes in the form have been withdrawn to the list, which is not in line with the normal logic. Why is this the case? the reason lies in this.todoItem=obj. This code is the so-called reference assignment, so todoitem and obj point to the same address, and the changes to this.todoItem will be directly reflected on obj, that is, this element in todoList, so it will be directly withdrawn in the list to avoid this situation. As long as you avoid drinking assignment, make the following changes to the above code:

/ / find todoitem var obj = this.todolist.filter (v = > v.id = id) [0] whose id value is equal to the passed parameter; / / if a pair of data is bound, the data will respond to this.todoItem = {id:obj.id, title:obj.title, desc:obj.desc} on the form

Refresh runs, and the program runs as expected. Next, add the update save operation, modify the event binding mode of the OK button to save, and determine whether to add or modify the operation by id:

Title: desc methods: {edit: function (id) {/ / find todoitem var obj = this.todolist.filter (v = > v.id = id) [0] whose id value is equal to the passed parameter; / / if a pair of data is bound, the data will respond to this.todoItem = {id: obj.id, title: obj.title, desc: obj.desc} on the form }, save: function () {if (this.todoItem.id) {/ / Edit save var obj = this.todolist.filter (v = > v.id = this.todoItem.id) [0]; obj.title = this.todoItem.title; obj.desc = this.todoItem.desc;} else {/ / add save this.todolist.push (new TodoItem (this.todoItem.title, this.todoItem.desc)) } / / the clerical error of the reset form has been modified in the actual code, but the posted code has not been modified. For more information, please see this.todoItem = {} below for the reason of the error.}, remove: function (index) {this.todolist.splice (index, 1);}}

The code is relatively simple, so I won't go into it here. You can take a look at the running effect:

In order to force the lattice to be higher, I would like to introduce another instruction, which has actually been used above, v-bind, this instruction is similar to v-on, the difference between the two is that the latter parameters are different. Generally, v-bind is used to pass property parameters, generally using the abbreviated form: attr, you can bind custom properties. The binding of ID values in the above code has been done using vMaibindVariety value = "todoItem.id", which is equivalent to ng-bind in angular. Based on our understanding of v-bind, we can reason by adding disable attributes to v-bind so that the OK button is available only if title is not empty.

Refresh run:

The above code works fine, but now what if I need to modify the validation rules to use the OK button when both title and desc are not empty? Of course, you would say, it's very simple to add a & & condition directly, but the problem is that now my model is relatively small and there are fewer attributes. If I have an object with a large number of attributes and do similar verification, it is a pit to modify the code in this way. at this point, you can already think of, since the verification rules have changed again, then you can consider encapsulating it as a point of change, the most intuitive way. It is encapsulated as a method, but vue provides a better way: computed, calculation attribute, which should come from the concept of knockout. If you are interested, you can take a look at the calculation property in knockout. Modify the code as follows:

New Vue ({el:'# app', data: {todolist: [], todoItem: {id:', title:', desc:'}}, computed: {canSave:function () {return! this.todoItem.title | |! this.todoItem.desc;}},. Omit other}})

You can see that the computed attribute is defined by method, here is the simplest way, read-only way, of course, you can also read and write control through get set, we may see later in the code, if urgent, you can check the official documents. When using computed, it is completely different from the method call, but is the same as the proxy pattern in the data property. If you have used knockout, you will not be surprised at this usage. The html section is modified as follows:

Refresh the page and run as shown in the figure:

Ok, that's it for editing this part. Without the backend interface, the save operation is simulated. Let's give a brief introduction to our query. Here, since there is no backend interface, we will only do the simplest demonstration and do the following for the code:

1. Add query input box, keyword, and add query button

2. Click the query operation, and the expected result: filter the list according to the query keywords entered.

Follow the above ideas to modify our code:

Keyword:

Add the keyword attribute to data to bind the input box, and add the query method to methods:

/ / Global variable, used to cache all data var list = [] Data: {todolist: [], todoItem: {id:', title:', desc:'}, keyword:''}, query: function () {/ / filter data that does not contain keyword in title / / it must be filtered by list global variables, not this.todolist, because this.todolist needs to be assigned, and the original list cannot be restored after assignment. This.todolist = list.filter (v = > v.title.indexOf (this.keyword)! =-1);}

The running effect of the refresh page is shown in the figure:

Code part of the comments have been written very clearly, if in doubt, you can increase the price comment. This is the end of this chapter, the article is a little water, in (3) will add server-side support, and use axios and server-side rest interface for interaction please look forward to, get ready to sleep.

Demo1 keyword: title desc {{todoItem.id}} {{todoItem.title}} title: desc var list= []; var TodoItem = (function () {var id = 1; return function (title, desc) {this.title = title; this.desc = desc; this.id = id++) }}) (); new Vue ({el:'# app', data: {todolist: [], todoItem: {id:', title:', desc:'}, keyword:'}, computed: {canSave: function () {return! this.todoItem.title | |! this.todoItem.desc }, methods: {query: function () {/ / filter the data in the title that does not contain keyword / / it must be filtered by the global variable list, but not through this.todolist, because the this.todolist needs to be assigned, and the original list cannot be restored after the assignment. This.todolist = list.filter (v = > v.title.indexOf (this.keyword)! =-1);}, edit: function (id) {/ / find todoitem var obj = this.todolist.filter (v = > v.id = id) [0] with id value equal to the passed parameter; / / bind a pair of data, then the data will respond to this.todoItem = {id: obj.id, title: obj.title, desc: obj.desc} on the form }, save: function () {if (this.todoItem.id) {/ / Edit save var obj = this.todolist.filter (v = > v.id = this.todoItem.id) [0]; obj.title = this.todoItem.title; obj.desc = this.todoItem.desc;} else {/ / add save this.todolist.push (new TodoItem (this.todoItem.title, this.todoItem.desc)) } / / reset form this.todoItem = {title:', desc:'};}, remove: function (index) {this.todolist.splice (index, 1);}) after reading the above, do you have any further understanding of how to build our own lightweight framework? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.