Why use vue.js? Why are 46% of front-end developers using it?

Summary in one sentence: Using the idea of ​​data binding, Vue can simply write a single page, a large front-end system, or the interface of a mobile app.

1. What is Vue.js?

● Progressive framework

● Bottom-up incremental development design

● Easy to learn

● Easy to integrate

Vue.js (pronounced /vju?/, similar to view) is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue adopts a bottom-up incremental development design. Vue's core library only focuses on the view layer, and is very easy to learn and integrate with other libraries or existing projects. Vue, on the other hand, is fully capable of powering complex single-page applications developed with single-file components and libraries supported by the Vue ecosystem.

[Recommended courses: vuejs tutorial]

2. What type of interface is vue.js suitable for?

a. There are many form items

b. The content needs to be modified according to the user’s operations

Vue.js is a tool for building web pages similar to Zhihu is a web-based application that has many form items and the content needs to be modified based on user operations.

3. What is a single page application (SPA)?

A page is an application (sub-application)

As the name suggests, a single-page application generally refers to a page that is an application. Of course, it can also be a sub-application, for example A page on Zhihu can be regarded as a sub-application. There is generally a lot of interactive processing in single-page applications, and the content on the page needs to change dynamically according to the user's operations.

4. I can also use JQuery to write the web version of Zhihu mentioned earlier. Why should I use Vue.js?

a. The product absolutely needs to be modified repeatedly

b. Modifications may cause the association and nesting level of the DOM to change, which will change the code related to the jquery structure. Extremely complex

c and vue.js can solve this problem

Do you still remember that when you first wrote JQuery, you wrote ('#xxx').parent().parent What about code like ().parent()? When you write for the first time, you feel that there are not many elements on the page, so don’t you just need to find the father’s father’s father of this element? I might as well write down the father’s father’s father of this element clearly in the comments. But if in a few days your project team leader or your product manager suddenly requests modifications to the web page you created, this modification request will affect the structure of the page, that is, the association and nesting level of the DOM will change. Then ('#xxx').parent().parent().parent() may become $('#xxx').parent().parent().parent().parent().parent( ).

This is nothing. In the future, product iteration will become faster and faster, more and more modifications will be made, and there will be more than one similar associated and nested DOM elements on the page, then modifications will be very laborious. Moreover, the JQuery selector's search for page elements and the DOM operation itself also have performance losses. Maybe when the time comes to open this page, it will become more and more stuck, and you will have no way to start.

If you have learned Vue.js at this time, these complaints will no longer exist.

5. What is the view layer often referred to in the front-end?

We can divide the DOM in HTML into a layer independently from other parts. This layer is called the view layer.

Vue’s core library only focuses on the view layer

6. What is the process of using jquery to develop a complete page?

a, html writing framework

b, css decoration

c, js interaction

When it comes to JQuery, you have to Speaking of JavaScript DOM operations. If you use JQuery to develop a Zhihu, then you need to use various DOM operation methods in JQuery to operate the DOM structure of HTML.

Now we abstract a web page application, then the DOM in HTML is actually a view. A web page forms the most basic view structure through the combination and nesting of DOM, and then through the modification of CSS, in Basic view structures are "make-up" to make them look more beautiful. Finally, when it comes to the interactive part, you need to use JavaScript to accept the user's interactive request, respond to the user's interactive operation through the event mechanism, and modify various data in the event processing function, such as modifying a certain DOM The innerHTML or innerText part.

7. Why does Vue.js make it so convenient to develop web-based front-end applications?

a, Declarative style

b, Responsive data binding

c, Component-based development

d ,Virtual DOM

Because Vue.js has declarative, responsive data binding, and component-based development, and it also uses Virtual DOM, a technology that sounds fancy just by looking at its name.

8. What is the dynamic data binding often mentioned in vue.js?

That is, vue.js will automatically respond to changes in data, and modify all data and view contents bound together according to the binding relationships pre-written by the user in the code. This binding relationship is declared by the v-model attribute of the input tag in the figure, so you may see someone roughly calling vue.js a declarative rendering template engine elsewhere.

9. Why is component development needed in the front-end?

a. Non-component development code and workload are very large

b. Modification is worse than death

But now we are doing single page Applications, page interactions and structures are very complex. There are many modules that need to be written on a page, and often the amount of code and workload for a module is very large. If it is developed according to the original method, it will be tiring. Moreover, when product requirements change in the future, it will be very troublesome to modify. I am afraid that after one of the divs is moved, other divs will follow and the entire page will be messed up, or some inner DOM events will be modified due to the event bubbling mechanism of JavaScript. After processing the function, various inexplicable and weird bugs appear.

10. How to carry out component development in the front-end?

a. Borrow the modular idea from the object-oriented backend (split some large functions into many functions, and then assign them to different people for development)

b. To split the various modules in a single-page application into separate components (components), we only need to write various component tags in the parent application first (occupying pits), and in the component tags Write the parameters to be passed into the component (just like passing parameters into a function, this parameter is called the attribute of the component), and then write the implementation of various components separately (fill in the pits)

In object-oriented programming , we can use object-oriented thinking to package various modules into classes or split a large business module into more and smaller classes. In process-oriented programming, we can also split some large functions into many functions and then assign them to different people for development.

In front-end applications, can we also encapsulate modules like programming? This introduces the idea of ​​component development.

Vue.js splits various modules in a single-page application into separate components through components. We only need to write various component tags in the parent application first ( (Occupying pitfalls), and write the parameters to be passed into the component in the component tag (just like passing parameters into a function, this parameter is called the attribute of the component), and then write the implementation of various components separately (fill in the pitfalls), Then the entire application is completed.

11. Why is there Virtual DOM technology?

a. Problem

Now the Internet speed is getting faster and faster. Many people have dozens or even hundreds of M optical fibers in their homes, and mobile phones have also started to use 4G. , it stands to reason that a web page is only a few hundred KB, and the browser itself will cache many resource files, so why does it still feel very slow to open a page that has been opened and cached before with dozens of M fiber?

b. Reason

(1) The browser itself has performance bottlenecks when processing DOM

(2) Use JQuery or native JavaScript DOM operation functions to manipulate the DOM When performing frequent operations, the browser must continuously render new DOM trees

This is because the browser itself has performance bottlenecks in processing DOM, especially in traditional development, using JQuery or native JavaScript When the DOM operation function performs frequent operations on the DOM, the browser has to continuously render new DOM trees, causing the page to look very stuck.

12. How to implement Virtual DOM?

a. Precompute various operations of dom and render the last result (reduce the number of dom renderings)

and Virtual DOM is a virtual DOM. In English, to put it simply, it is a method that can perform various calculations through JavaScript in advance to calculate and optimize the final DOM operation. Since this DOM operation is a preprocessing operation and does not actually operate the DOM, it is called virtual DOM. Finally, the DOM operation is actually submitted after the calculation is completed, and the DOM operation changes are reflected to the DOM tree.

13. How to use Vue.js for single-page application development?

In fact, you can just watch the learning video and start doing it, it should be the best

a. Introduction-the basic part of the vue.js official document, bite the bullet and read it again

My suggestion is to first read the basic part of the introduction-vue.js official document. Except for the component section, which involves a lot of obscure terms, the previous chapters just use Vue.js as a template engine.

b. Basic usage of ECMAScript6, Webpack, NPM and Vue-Cli. It is best to have some understanding of Node.js

Then start learning ECMAScript6, Webpack, NPM and Vue-Cli For the basic usage, it is best to have some understanding of Node.js.

c. Watch various practical videos and articles on the Internet and other people’s open source source code

Finally, take a brief look at the component part. After understanding the concepts in the component, start watching various practical videos and articles on the Internet as well as other people's open source source code.

14. What is ECMAScript?

The relationship between ECMAScript and JavaScript is that the former is a specification of the latter, and the latter is an implementation of the former (other ECMAScript dialects include Jscript and ActionScript). In everyday situations, these two words are interchangeable.

ECMAScript6 is a new generation of JavaScript language.

15. What is Webpack?

a. Front-end packaging tool

Webpack is a front-end packaging and building tool. If you have been writing HTML, CSS, and JavaScript by hand before, and introduced CSS into your HTML file through the link tag, and introduced external JS scripts through the src attribute of the Script tag, then you will definitely feel unfamiliar with this tool. It doesn't matter, let's first understand why we should use Webpack, and then just study with the reasons.

16. Why use Webpack?

a. Convenient management of various materials

b. Packaging to reduce the number of browser visits

As mentioned before, make a single-page application The program itself is quite complex, and it will definitely use a lot of materials and other third-party libraries when doing it. How should we manage these things?

As mentioned earlier, Webpack is a front-end packaging tool. Why should the front-end code be packaged? Because a lot of materials are used in single-page applications, if each material is introduced through the src attribute or link in HTML, then when requesting a page, the browser may have to initiate more than ten requests, often requesting these The resources are all script codes or very small pictures. These resources themselves are only a few kilobytes, and it does not even take 1 second to download. However, since HTTP is an application layer protocol, its lower layer is TCP, the transport layer protocol, and TCP’s handshake and wave. The process may take longer than downloading the resource itself, so all these small files need to be packaged into one file. In this way, multiple resources can be downloaded in just one TCP handshake and wave process, and multiple resources are downloaded due to They all share an HTTP request, so the head and other parts are also shared, which is equivalent to forming a scale effect, making the web page display faster and the user experience better.

17. What are NPM and Node.js? What is their relationship?

a. Node.js is a server-side JavaScript running environment

Node.js is a server-side JavaScript running environment. Node.js can be used to write JavaScript Independent program.

b. Node.js can write independent programs (Webpack is written by Node.js)

As we mentioned before, Webpack is written by Node.js, so as a front-end development, Even if you don't use Node.js to write independent programs, you still need a Node.js running environment. After all, many front-end tools are written using it.

c. NPM is a node.js package manager (similar to Java's Maven (package dependency management), and PHP has a similar one).

NPM is a node.js package manager. When we were in traditional development, most of JQuery.js was searched on Baidu, and then downloaded from the official website, or directly introduced CDN resources. This method is too troublesome. If we encounter other packages in the future, the code of this package may itself call other packages (it is also said that this package has dependencies on several other packages), then we need to introduce a package into our project that will become It was very difficult. Now that we have the NPM package manager, we can directly introduce it through

npm install xxx包名称

, for example,

npm install vue

18. What is Vue-CLi?

It is a scaffolding tool for vue.js. To put it bluntly, it is a tool that automatically helps you generate the project directory, configure Webpack, and various dependent packages. It can be installed through

npm install vue-cli -g

. The following -g means global installation, which means You can call it directly through the vue command after opening the command line.

19. What are Vuex and Vue-route

Vuex is a state manager for vue. Used to centrally manage various states in a single-page application.

Vue-route is a front-end router for vue. This router is not the router we use to access the Internet, but a thing that manages the mapping relationship between request entries and pages. It can replace parts of the page without refreshing, making users feel like they have switched to a web page.

To explain these two things clearly, it will take a lot of space, so I will just briefly mention it here. The most important thing is to learn vue.js itself first.

The above is the detailed content of Why use vue.js? Why are 46% of front-end developers using it?. For more information, please follow other related articles on the PHP Chinese website!