Vue writes a simple form instance


  • 1, scripted development
  • 2, engineering development
  • 3, the difference between engineering and scripts
  • . ] 4, a table to try water
  • 4,1, target
  • 4.2, thinking
  • 4.3 design encoding the
  • 4.4, the effect of
  • 5, operational separation
  • 6, functional expansion – personalize


I used the back end ( ) development, will point js, jQuery, but the effects will not write js, css As well, you can make use of ready-made, will not write himself up.

found that the momentum of front-end development is now too fast, a little to get rid of the feeling of the back-end, so the germination of the idea want to learn a science front-end development. So the three front-end framework, first learn which one do? Vue will first learn it, so why then? Very simple, he’s only three letters of the alphabet, a good mind to write about.

Vue learning time is relatively short, only three to five days now, so some usage may be very immature, or even wrong, but not afraid, just started to learn, to discover errors corrected promptly enough. Write every day experience points, if met good people to pointing or two, it would earn big hair.

Vue There are at least two modes of development: the script is the development and engineering development.

First, scripted development

and is a bit like using jQuery, cited vue.js the page, and then write the template according to the rules of vue, write code, Lu can be opened up. JQuery quite like this way and that with the also very interesting, change the code a complete preservation, inside a browser refresh you can see the effect, it is easy and intuitive.

this way for early beginners, as well as some ideas to do the test, verify whether the idea do the same. But the official project Can there so use it? A book which said that – no. But as a beginner VueI haven’t had the ability to do this now.

Second, engineering development

This time I feel very pressing, but I looked at it, this is not the development of the backend. Way? It’s too like it.

Back end development, as an example of ASP.NET MVC (why don’t you use other languages? Don’t earn it, because I will only be this, other will not be). Open IDE, create a project, select the framework version, select the project type, select. . . . . Then IDE will load the DLL reference, load a DLL reference, load a folder, create a folder, create a default page, code. Then one run, a simple website comes out.

The engineering development of VUE is also like this. First install Node and NPM, then install the Vue-CLI, this is called a scaffold, EMMM, a face? Take a look at the last paragraph I wrote, this scaffolding skills. Of course, it is not a reference to the DLL, but it is a variety of options that need to be generated by Vue. It will make you a variety of options. Finally build a folder, and then magically is to use Node to do a site, just run it directly. . It is also possible to simulate the rear end.

This is too big, I feel, plus a database (such as mysql), there is no rear end.

How to do it, don’t say, emmmm, I am now just a semi-solving. Anyway, very magical is right.

Third, the engineering and script Difference

If the script development is introduced to the page, then write the code, then engineering is to put himself The code is added to the Vue framework, and the frame is given to the frame, and the entire project came out.

The development of history is like this, no matter whether personal is not liked, this development method must be more and more fire, unwilling to accept, and it will be eliminated in the morning.

Four, there is a Table Trial Water

Look at the official website, check Baidu will have some simple introduction, here is also based on these simple introductions, come a little moreIt is also a more practical use. Because I am just a beginner, I don’t know what level of this use belongs, and the brick is pushed, and I will take it out for your reference.

1, the target

No matter what is doing, you must first define a goal. Although it is just a test water, you should also know what to do. Then set a simple table, such as the picture below.

Many simple tables, not much column, because the number of columns is not a problem. I will know when I look at the implementation.

2, Idea VUE写一个简单的表格实例

VUE features – data drive view. The data is dominated, then binds the data to the page. This is the core, don’t run.

So let’s analyze it, this form consists of two parts: heads and gates.

Head: Company Name, Phone, etc. There will be many columns in the actual project. Here first take two examples. Use

to indicate.

Body: It is a list of company information, composed of multiple data, and the number of fields, and the header correspond. Note with

. So we design a packet of a head and a body, and then let the Vue are bound to OK.

3, design and encoding

First design a packet, Emmmm, do not know the professional name is 啥, anyway, it is a JSON structure. Such as this

VAR Table = new Vue ({EL: ‘#TABLE’, DATA: {Message: ‘Company Information!’, Orderby: [“C1″, ” C2 “], // can control the order of the field, want to adjust the order of the column, change this array, you can do personalization settings Tableth: {// Description information of the header C1: {Title:” Company Name “, // can also add additional description, such as Width, etc. Align: “Left”}, C2: {Title: “Phone”, Align: “Right”}}, DataList: [{// packet, field name as keyword Easy to adjust the adjustment of the column Order C1: “Du Niang 2”, C2: “123123123”}, {C1: “Penguin 2”, C2: “7897899787”}, {C1: “Ali Dad 2”, C2: “456456456 “}]}});

EL This is the reserved word of Vue, must be written, the back is the ID of the DOM, such as
. The idea of ​​jQuery is $ (‘# Table’). Data is also the reserved word of Vue, the back is Model, the structure can be set at will, how to play, think about it.
  Of course, Vue has a lot of reserved words, such as methods, etc., but here will introduce these two, and other later.  
Then design a template, such as this:


Sequence number


I don't know if you have discovered a problem: there is no such thing as a business-related Dongdong, the "serial number" is not counted. The gland uses two cycles (nested loops). This usage is very good. I don't want to explain more, say more, there will be a feeling of making a word. I found out that the picture above is the operation. The data packet is designed, the template is set, and then it will be handed over to VUE. If you open your browser to view the web page, you can see this effect.
This template is also very simple, the head is coming out with a loop. How many columns can be recycled in the packet, so I started, how many columns are not important, because the loop is right How many columns are you? 4, the effect
Five, business separation
This template can be seen as a universal template for all lists, because he is suitable for any of the data, or employee Information, or product information, you can write this, and you don’t have to change after COPY! Because I put the business-related allocation to the packet. Add a list of demand, just write the packet, don’t change the template code, is it easy?
Of course, if everyone is doing this, then the hero will be slightly. Yesterday I asked for a long time, no one told me, how did their data list do, and I still don’t know how to do data lists in Vue now. Baidu, did not find out useful information.

Sixth, the function expansion personalization setting

I don’t know if you have such a situation, receive a task, ask for n in a list of data lists. Field, this is nothing, do it. So muchAfter which the front row in which it? If the document was clearly stated, so easy to handle, according to the documentation to chant. If the document is not explicitly stated in the order, then it supposed to? Only in accordance with their own habits come.

and then to the user to do after watching the first leaders saw that, this phone how to put it, and finally put a good unimportant.

and then look to the other leaders say, hey, this phone how to put the final, not yet, and you say, to put this in front!

? ? ? ,,,,, just the leaders said.

then gave the operator of view, the operator said the phone up here are not used, can not be altered?

here just give a simple example, the customer’s needs are always strange, just adjust the order of the simplest and most common.

For our customers, it is not that a change of position, I use Excel every day to change the order, you project it is certainly worse than Excel, change sequential difficult?

it is not difficult, but do not change to change, and the other in the end I listen to whom?

Careful you may find that the data packet which has a orderBy: [ “c1”, “c2”] have no access to, this is doing?

This is not the sort of the data, but rather to the column ordered. This array is put key, behind these two data packets are key to organize data. Well, this array is the order of the sequence of key columns.

it is only necessary to change the array of key on it. Then we can all be set to each user a separate array, so that each user can have their own order of the columns, and do not interfere with each other. Such customers are satisfied, we do not always adjust the order.

Finally, the template needs to change about:



{{tableTh [key] .title}}

{{i + 1}}

{{TR [key]}}

  First traversed this array, then extract the data in the inside to make bindings. In this way, we separate the order of the order of the adjusted column, and there is also a benefit-personalization setting. Thank you for your study and support for Tumi Clouds. 
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment