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

This article mainly explains "what are the problems related to vue.js". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the problems related to vue.js"?

1. What is Vue.js?

● progressive frame

The Design of bottom-up incremental Development of ●

● is easy to learn.

● is easy to integrate

Vue.js (pronunciation / vju?/, is similar to view) is a progressive framework for building a user interface. Unlike other heavyweight frameworks, Vue uses 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. On the other hand, Vue is fully capable of driving complex single-page applications developed using single-file components and libraries supported by the Vue ecosystem.

[recommended course: vuejs tutorial]

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

A, there are many items in the form.

B. The content needs to be modified according to the user's operation.

Vue.js is a web application that is used to build a web version similar to the web version of Zhihu, which has many items and needs to be modified according to the user's operation.

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

One page is the application (sub-application)

As the name implies, a single-page application generally refers to a page is an application, of course, it can also be a sub-application, for example, a page of Zhihu can be regarded as a sub-application. Generally speaking, there is a lot of interactive processing in a single-page application, and the content of the page needs to change dynamically according to the user's actions.

4. I can also use JQuery to write the web version of Zhihu mentioned above, why use Vue.js?

A. The product absolutely needs to be modified repeatedly.

B. Modification may lead to changes in the association and nesting levels of DOM, which will make the code related to jquery structure extremely complex.

C, vue.js can solve this problem.

Do you remember writing code like ('# xxx'). Parent (). Parent (). Parent () when you first wrote JQuery. When you wrote for the first time, you felt that there were not many elements on the page, so you were looking for the father of this element. I could only write down the father of this element clearly in the comments. But in case your project leader or your product manager suddenly asks for a change to your web page after a few days, which will affect the structure of the page, that is, the association and nesting level of DOM will change, then ('# xxx'). Parent (). Parent (). Parent () may become $('# xxx'). Parent (). Parent ().

This is nothing, when the product iterates faster and faster, changes more and more, and there is more than one similar association and nested DOM elements in the page, then it will be very difficult to modify. And the JQuery selector to find page elements and DOM operation itself is also a performance penalty, which may become more and more stuck when you open the page, but you don't know how to start.

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

5. What is the view layer often mentioned in the front end?

We can separate the DOM in HTML from other parts into a hierarchy called the view layer.

The core library of Vue only focuses on the view layer

6. The process of developing a complete page using jquery?

A, html writing framework

B, css decoration

C, js interaction

When it comes to JQuery, we have to talk about JavaScript's DOM operation. If you use JQuery to develop a Zhihu, then you need to use various DOM operations in JQuery to manipulate the DOM structure of HTML.

Now we abstract a web application, then DOM in HTML is actually a view, a web page is through the combination and nesting of DOM to form the most basic view structure, and then through the modification of CSS, in the basic view structure "makeup" to make them look more beautiful. Finally, when it comes to the interaction part, we need to use JavaScript to accept the user's interaction request, and respond to the user's interaction through the event mechanism, and modify all kinds of data in the event handler, such as modifying the innerHTML or innerText part of a DOM.

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

A. Declarative.

B, responsive data binding

C. Component-based development

D 、 Virtual DOM

Because Vue.js has declarative, responsive data binding, and component-based development, and also uses Virtual DOM, which feels classy by name.

8. What is the so-called dynamic data binding in vue.js?

That is, vue.js automatically responds to changes in the data and modifies all bound data and view contents 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 on the diagram, so you may also see someone somewhere else roughly call vue.js a template engine for declarative rendering.

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

A, non-component development code and workload are very large.

B. Life is worse than death when modified.

But now we do a single-page application, the page interaction and structure are very complex, there are many modules to write on a page, and often the code amount and workload of a module is very large, if we still follow the original method to develop, then it will be exhausting. And after the change in product requirements, it is also very troublesome to modify, for fear that after moving one of the div, the other div will follow the avalanche, the whole page will be messed up, or due to JavaScript's event bubbling mechanism, resulting in the modification of some inner DOM event handling functions, there will be a variety of inexplicable and weird BUG.

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

A, the idea of modularization in the object-oriented of the borrowed back-end (some big functions are split into many functions and then assigned to different people to develop)

B. Split the various modules in a single-page application into a separate component (component). We only need to write various component tags (occupied pits) in the parent application, and write the parameters to be passed to the component in the component tag (just like passing parameters to the function, this parameter is called the component property), and then write the implementation of each component (fill in the pit).

In object-oriented programming, we can use the idea of object-oriented 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 major functions into many functions and assign them to different people to develop.

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

Through components, Vue.js splits various modules in a single-page application into a single component (component). We only need to write various component tags (occupied pits) in the parent application, and write the parameters to be passed to the component in the component tags (just like passing parameters to the function, this parameter is called the property of the component), and then write the implementation of each component (fill in the hole). And then the whole application is done.

Why is there Virtual DOM technology?

A, question

Now the speed of the network is getting faster and faster. Many people have dozens or even hundreds of megabytes of optical fiber in their homes. Mobile phones have also started with 4G. According to reason, a web page is only a few hundred kilograms, and the browser itself will cache a lot of resource files. So why do dozens of megabytes of optical fiber open a page that has been opened before and still feel slow?

B. Reason

(1) there is also a performance bottleneck for browsers to deal with DOM.

(2) when frequently manipulating DOM with JQuery or native JavaScript DOM operation functions, the browser will continue to render the new DOM tree.

This is because the browser itself also has performance bottlenecks in dealing with DOM, especially in traditional development, when the DOM is frequently manipulated with JQuery or native JavaScript DOM operation functions, the browser continues to render the new DOM tree, making the page look very stuttered.

12. How to implement Virtual DOM?

A. Pre-calculate the various operations of dom to render the last result (reduce the rendering times of dom)

And Virtual DOM is the English of virtual DOM, to put it simply, it is a kind of calculation that can be carried out in advance through JavaScript, and the final DOM operation can be calculated and optimized. Because this DOM operation belongs to preprocessing operation, there is no real operation DOM, so it is called virtual DOM. Finally, the DOM operation is actually submitted after the calculation, and the change of the DOM operation is reflected on the DOM tree.

13. How to do single-page application development with Vue.js?

In fact, you can watch the learning video directly and start to do it, which should be the best.

A, introduction-take a look at the basic part of the vue.js official document

My advice is to first take a hard look at the basics of the introduction-vue.js official documentation. Apart from the many obscure terms covered in the components section, the previous chapters are all about using Vue.js as a template engine.

B, ECMAScript6,Webpack,NPM and the basic usage of Vue-Cli, it is best to have some knowledge of Node.js

Then start to learn the basic usage of ECMAScript6,Webpack,NPM and Vue-Cli, and it's best to know something about Node.js.

C. Watch all kinds of live videos and articles on the Internet, as well as others' open source code.

Finally, the component part takes a general look at the components, and after understanding what concepts are in the components, we begin to watch various online live videos and articles, as well as other people's open source code.

14. What is ECMAScript?

The relationship between ECMAScript and JavaScript is that the former is the specification of the latter, and the latter is an implementation of the former (other ECMAScript dialects also include Jscript and ActionScript). On daily occasions, the two words are interchangeable.

ECMAScript6 is the new generation of JavaScript language.

15. What is Webpack?

A, front-end packaging tool

Webpack is a front-end packaging and build tool. If you used to be a handwritten HTML,CSS,JavaScript and introduce CSS into your HTML file through the link tag, and external JS scripts through the src attribute of the Script tag, then you will be familiar with this tool. Never mind, let's first find out why we use Webpack, and then learn with the reasons.

16. Why use Webpack?

A, facilitate the management of all kinds of materials

B, package to reduce the number of browser visits

As mentioned earlier, making a single-page application itself is quite complex, and it is sure to use a lot of material and other third-party libraries. How do we manage these things?

Also mentioned earlier that Webpack is a front-end packaging tool, why should the front-end code be packaged? Because there is a lot of material used in a single-page application, if each material is introduced by using the src attribute or link in HTML, then when requesting a page, the browser may have to make more than a dozen requests, often these resources are script code or very small pictures, these resources themselves are only a few k, it does not even take a second to download, but because HTTP is an application layer protocol Its lower layer is TCP, the transport layer protocol. The handshake and wave process of TCP may take longer than the download resource itself, so all these small files need to be packaged into a file, so as long as a TCP handshake and wave process, multiple resources will be downloaded, and multiple resources are shared because they all share a HTTP request, so head and other parts are also shared, which is equivalent to a scale effect. Make the web page display faster and the user experience better.

17. What are NPM and Node.js? What is the relationship between them?

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

Node.js is a server-side JavaScript running environment, and independent programs can be written in JavaScript through Node.js.

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

As we mentioned earlier, Webpack is written by Node.js, so as a front-end developer, even if you don't use Node.js to write independent programs, you have to have a Node.js runtime 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), php has a similar one.

NPM is a package manager for node.js. When we are in the traditional development, JQuery.js is mostly Baidu search, and then go to the official website to download, or directly introduce CDN resources, this method is too troublesome. If you encounter other packages in the future, the code of this package may also call other packages (also known as this package has a dependency with those other packages), so it will be very difficult for us to introduce a package into our own project. Now we have NPM as a package manager, which can be accessed directly through the

Npm install xxx package name

To introduce it, 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 generates a project directory, configures Webpack, and various dependent packages, which can be accessed through the

Npm install vue-cli-g

The following-g means global installation, which means that you can open the command line and invoke it directly through the vue command.

19. What are Vuex and Vue-route

Vuex is a status 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 a router we use to surf the Internet, but something that manages the mapping of request entries and pages. It can replace part of the page without brushless, making users feel as if they have switched to a web page.

To explain these two things clearly, it takes a lot of space, so here is just a brief mention, first learn vue.js itself is the most important.

Thank you for your reading, the above is the content of "what are the issues related to vue.js". After the study of this article, I believe you have a deeper understanding of the issues related to vue.js, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.