A framework developed by the Chinese has gone viral and is used by many people around the world

Today is the 136th day for Liu Xiaoai to learn Java by herself.

Thank you for watching. Thank you.

The learning content is as follows:

• Learn about two or three days of front-end knowledge, Vue framework.
• Learn about the development of the front-end development model.
• Introduction and use of Vue.
• Vue quick start, write an introductory case.

I. Introduction of Vue

Let’s talk about the evolution of the front-end development model.

1 Static Page

The original web page is based on HTML, is pure static web pages.

Page information flows from the server in one direction, and developers are only concerned with the style and content of the page.

2 Refresh the DOM asynchronously

Since 2005, Ajax has become more and more important to front-end developers because of the dynamic rendering of page data.

At this point, developers not only need to write HTML styles, but also understand Ajax and back-end interaction, and then use JS to manipulate Dom elements to achieve dynamic page effects.

For example, jQuery is a typical example, while we do a brief review of jQuery:

① View: view

The view, the render result of the page, it’s not exactly a view here, it’s not done yet.

But for the sake of a subsequent illustration of the MVVM pattern, I’ll use this example to illustrate that it can be understood as a view.

② Model b

The model, which includes data and some basic operations, can be understood as data responding from the background.

(3) the DOM operation

So how do you render the model into the corresponding view?

The technical term is DOM manipulation, in this case the HTML () method in jQuery.

Remember that DOM manipulation can be tedious, and there are a lot of methods to remember. Here the HTML () method is easy.

3MVVM, focusing on models and views

Here’s the kicker: It frees developers from tedious DOM manipulation.

VM: View-model, which is where MVVM got its name. Vue is an MVVM schema framework.

Vue. Js, one of the three giants of the front-end framework, the author is a Chinese, really is to contend for the spirit ah, too fierce.

Don’t even think about it, definitely learn it, not only support domestic what, in essence it is really great.

Much easier to use than jQuery.

With Vue, developers no longer have to worry about how models and Views interact:

• As soon as we change the Model, it will show up in the View.
• When the user modifies the View, the data in the Model changes as well.

Vue quick start

1 the node and NPM

NPM is a module management tool provided by Node, which makes it easy to download and install many front-end frameworks, including Jquery, AngularJS, and VueJs.

For the convenience of later learning, we first install Node and NPM tool, this NPM can be initially understood as Java project maven, is a management tool.

Download Node and install it, and it comes with NPM.

NPM’s default warehouse address is in the foreign website, the speed is slow, we suggest you set to Taobao mirror. But switching mirrors can be tricky.

The recommended tool is NRM

There are many commands, but looking at the names is very simple, make a summary:

• To view the NPM version, run the NPM -v command
• NRM installation command: NPM install NRM -g
• Command to view the warehouse list of NPM: NRM ls
• Run the NRM use Taobao command
• To test the speed, run the NRM test NPM command
• NRM test Taobao

2 Create a new project

Use Static Web to learn Vue.

You can download the VUE plug-in from the IDEA development tool by following the steps of file-setting-plugins and searching for vue installation.

For the use of vUE, you can directly use the common CDN service, we use NPM installation here.

In the lower left corner of idea, there is a Terminal button:

This window is equivalent to the DOS window in front, now directly in the IDEA development tool, it is very convenient to use.

① Project initialization

Command: NPM init -y.

Init means initialization, -y means yes. After initialization, a package.json file will appear in the project directory.

There are basic descriptions of the project, such as name, version, and so on, which are somewhat similar to poM files in Java.

(2) install the Vue

Command: NPM install vue –save

After installation, the node_modules directory will appear in the project, and there will be a vue directory in it.

If you look at package.json, you’ll see the change:

The package.json file is similar to a POM file in Java, and installing vue is a bit like introducing jar packages into Java.

Even the keywords for importing dependencies are the same, and once these are configured, you can use VUE for development.

Three, Vue introduction case

Create an HTML file and write an introductory example:

Import vUE in the project directory first, needless to say.

① Corresponding view view

The view here can be thought of as this DIV tag, where it needs a data name that needs to be queried in the background.

Format: {{name}}, notice two curly braces.

② Corresponding model model

Of course, here is just a quick study, you can use a written data instead of, and not from the database to query, the actual development process is to go to the database query.

• El: short for element. The module is identified by the ID selector, which binds the view to the model.
• B: Yes, that’s right.

Instead of using DOM manipulation to render the data to the corresponding label, the data and view can now do this automatically.

We also talked about VM earlier: view-Model, which refers to bidirectional operations between Model and View.

This example just uses model to render the view. How does the view modify the Model?

(3) dialog

V-model =”num”, that is, the dialog box and the model data num binding, enter the corresponding value in the dialog box, the model data num will also be modified.

This is very powerful and very convenient.

④ Click event

@click, which is the format for writing click events in Vue, can also be bound to num in Model.

Ok, once the code is written, do a test:

The data on the page will change dynamically with the value entered in the dialog box, and click the event to complete the effect of adding one.

The last

Thanks for watching.

If you can, please give it a thumbs up. Thank you.